如何在React-Vis中指定坐标轴范围？含Y轴0-100示例

嘿，这个需求我太熟了！React-Vis里完全可以轻松指定坐标轴的固定范围，不用让组件自动根据数据去计算极值。核心就是利用坐标轴组件的domain属性来强制设置范围。

针对你给出的示例数据：

const data = [ {x: 1, y: 45}, {x: 2, y: 50}, {x: 3, y: 85} ];

要把Y轴范围固定在0到100，只需要给YAxis组件传入domain={[0, 100]}即可。下面是完整的代码示例：

import { XYPlot, YAxis, XAxis, LineSeries } from 'react-vis';

function CustomAxisRangePlot() {
  const data = [ {x: 1, y: 45}, {x: 2, y: 50}, {x: 3, y: 85} ];
  
  return (
    <XYPlot width={300} height={300}>
      {/* 这里通过domain属性强制Y轴范围为0-100 */}
      <YAxis domain={[0, 100]} />
      <XAxis />
      <LineSeries data={data} />
    </XYPlot>
  );
}

export default CustomAxisRangePlot;

额外小提示： #

• 同样的逻辑也适用于X轴：如果需要固定X轴范围，给XAxis组件加上domain属性即可，比如domain={[0, 4]}就能让X轴从0显示到4。
• 不管你用的是LineSeries、BarSeries还是其他系列组件，只要设置了坐标轴的domain，组件都会自动适配这个固定范围，不会再根据数据的极值动态调整。
• 如果后续数据更新，只要domain属性不变，坐标轴范围就会一直保持你设置的值。

这样设置之后，哪怕你的数据Y值最高只有85，Y轴也会稳稳显示0到100的完整范围啦！

内容的提问来源于stack exchange，提问作者Prashant Andani