如何让Unovis图表的Y轴从0开始?
如何让Unovis图表的Y轴从0开始?
当前Unovis图表的Y轴为动态轴,取值依赖于数据。以下是React开发的相关代码:
import { VisAxis, VisLine, VisXYContainer } from '@unovis/react' import { data } from './data' export default function() { return ( <VisXYContainer data={data}> <VisLine x={d => d.x} y={d => d.y}/> <VisAxis type='x'/> <VisAxis type='y'/> </VisXYContainer> ) }
可以通过给<VisXYContainer>组件设置domain属性,强制Y轴从0开始。domain属性支持手动指定坐标轴的取值范围,给其中的y字段传入数组,第一个元素设为0(最小值),第二个元素用'auto'让最大值自动适配数据上限即可。
修改后的代码如下:
import { VisAxis, VisLine, VisXYContainer } from '@unovis/react' import { data } from './data' export default function() { return ( <VisXYContainer data={data} domain={{ y: [0, 'auto'] }}> <VisLine x={d => d.x} y={d => d.y}/> <VisAxis type='x'/> <VisAxis type='y'/> </VisXYContainer> ) }
内容的提问来源于stack exchange,提问作者Rebecca B
相关产品推荐
相关产品推荐

