Plotly.js：如何设置坐标轴范围的起始与终止值以实现目标效果

要固定坐标轴的起始与终止值，直接在图表的layout配置中，给对应坐标轴（x轴用xaxis，y轴用yaxis）添加range属性，传入包含起始值和终止值的数组即可，替代Plotly默认的自动缩放逻辑，实现目标显示效果。

示例代码 #

比如要将Y轴范围固定为[0, 100]、X轴范围固定为[0, 10]，代码如下：

// 示例数据
const data = [{
  x: [1, 2, 3, 4, 5],
  y: [20, 40, 60, 80, 90],
  type: 'scatter'
}];

// 布局配置，设置坐标轴范围
const layout = {
  yaxis: {
    range: [0, 100], // Y轴起始值0，终止值100
    title: 'Y轴标题'
  },
  xaxis: {
    range: [0, 10], // X轴起始值0，终止值10
    title: 'X轴标题'
  }
};

// 渲染图表
Plotly.newPlot('myDiv', data, layout);

关键说明 #

• range数组的第一个元素是坐标轴的起始最小值，第二个是终止最大值
• 若仅需设置单个坐标轴范围，只配置对应轴的range即可，另一轴可保持自动缩放
• 后续需动态修改范围时，可使用Plotly.update()方法更新layout中的坐标轴配置

内容的提问来源于stack exchange，提问作者M Imam Pratama