如何在ZingChart单曲线图表中添加左右同值双Y轴？

要实现左右两个值完全相同的Y轴，核心是在图表配置中定义两个参数完全一致的Y轴，一个居左、一个居右，具体实现如下：

方法1：初始配置中定义双Y轴 #

直接在你的Config2里添加两个Y轴配置，确保它们的刻度范围、步长完全一致：

const Config2 = {
  type: "line",
  // 左侧Y轴（默认）
  "scale-y": {
    min: 0, // 根据你的实际数据设置范围
    max: 100,
    step: 10,
    label: { text: "数值" }
  },
  // 右侧重复Y轴
  "scale-y-2": {
    min: 0,
    max: 100,
    step: 10,
    position: "right", // 设置轴在右侧
    label: { text: "数值" }
  },
  plots: [] // 初始空数组，后续通过addplot添加折线
};

之后保留你原有的渲染和动态修改代码即可：

zingchart.render({
  id: 'Chart2',
  data: Config2,
  height: '600',
  width: '100%'
});

zingchart.exec('Chart2', 'modify', {
  graphid: 0,
  data: {
    "title": { text: "" },
    "scale-x": { "labels": Labels }
  }
});

zingchart.exec('Chart2', 'addplot', {
  graphid: 0,
  plotindex: 1,
  data: {
    values: Data1_3,
    text: "Gain",
    "line-width": 5,
    "scales": "scale-x,scale-y" // 关联左侧轴即可，右侧轴会自动同步显示
  }
});

方法2：动态添加右侧重复Y轴 #

如果不想修改初始Config2，可以通过zingchart.exec动态获取左侧轴的参数，再创建右侧轴：

zingchart.render({
  id: 'Chart2',
  data: Config2,
  height: '600',
  width: '100%'
});

// 先获取左侧Y轴的刻度参数
const yScaleInfo = zingchart.exec('Chart2', 'getscaleinfo', { scale: 'scale-y' });

zingchart.exec('Chart2', 'modify', {
  graphid: 0,
  data: {
    "title": { text: "" },
    "scale-x": { "labels": Labels },
    // 动态添加右侧重复轴
    "scale-y-2": {
      min: yScaleInfo.min,
      max: yScaleInfo.max,
      step: yScaleInfo.step,
      position: "right",
      label: { text: "数值" }
    }
  }
});

zingchart.exec('Chart2', 'addplot', {
  graphid: 0,
  plotindex: 1,
  data: {
    values: Data1_3,
    text: "Gain",
    "line-width": 5,
    "scales": "scale-x,scale-y"
  }
});

关键说明 #

• 两个Y轴的min、max、step必须完全一致，才能保证刻度完全对齐
• 右侧轴通过position: "right"设置位置
• 折线只需关联其中一个Y轴即可，另一个轴会自动渲染并保持刻度同步

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