如何解决有没有办法在 Nivo 中为 ResponsiveStream 设置范围?
我正在使用 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>
);
}
这会产生这个图像
y 轴只到 6。我怎样才能让它到 10?
Line
component 具有 y 轴范围的设置
yScale={{
type: 'linear',stacked: boolean('stacked',false),min: -1,max: 1,}}
但这些设置似乎不适用于 Stream
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。