有没有办法在 Nivo 中为 ResponsiveStream 设置范围？

编程问答 2022-05-28

问题描述

我正在使用 Nivo，一个基于 react d3 的图表库。

我正在使用 ReactiveStream component。默认情况下，它会自动缩放图表，以便最大值和最小值位于图表的顶部和底部。

我怎样才能给它一个自定义比例？例如说数据是 [2,3,4]，它会在底部显示 2，在顶部显示 4 但我想要在 y 轴上的比例为 0 到 10

这是代码

import "./styles.css";
import { ResponsiveStream } from '@nivo/stream';

const MyResponsiveStream = ({data}) => (
  <ResponsiveStream
    data={data}
    keys={['Raoul','Josiane']}
    margin={{top: 50,right: 110,bottom: 50,left: 60}}
    axisTop={null}
    axisRight={null}
    axisBottom={{
      orient: 'bottom',tickSize: 5,tickPadding: 5,tickRotation: 0,legend: '',legendOffset: 36
    }}
    axisLeft={{orient: 'left',legendOffset: -40}}
    offsetType="none"
    colors={{scheme: 'nivo'}}
    fillOpacity={0.85}
    borderColor={{theme: 'background'}}
    dotSize={8}
    dotColor={{from: 'color'}}
    dotBorderWidth={2}
    dotBorderColor={{from: 'color',modifiers: [['darker',0.7]]}}
    legends={[
      {
        anchor: 'bottom-right',direction: 'column',translateX: 100,itemWidth: 80,itemHeight: 20,itemTextColor: '#999999',symbolSize: 12,symbolShape: 'circle',effects: [
          {
            on: 'hover',style: {
              itemTextColor: '#000000'
            }
          }
        ]
      }
    ]}
  />
)

export default function App() {
  return (
    <div className="App" style={{width: '500px',height: '400px'}}>
      <MyResponsiveStream data={[
          { "Raoul": 2,"Josiane": 2,},{ "Raoul": 3,"Josiane": 1,{ "Raoul": 4,{ "Raoul": 5,{ "Raoul": 2,"Josiane": 3,{ "Raoul": 1,]}
      />
    </div>
  );
}

这会产生这个图像

enter image description here

y 轴只到 6。我怎样才能让它到 10？

Line component 具有 y 轴范围的设置

        yScale={{
            type: 'linear',stacked: boolean('stacked',false),min: -1,max: 1,}}

但这些设置似乎不适用于 Stream

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptnivo-reactreactjsreactjsreactjsreactjs