如何在ng2-charts中使用左右双y轴？折线图关联失败问题排查

问题出在属性名写错了——你用了yAxesID（复数形式），但Chart.js中数据集关联y轴的正确属性是yAxisID（单数形式），所以图表无法识别你的配置，导致折线图默认绑定到左侧y轴。

修正后的代码如下：

datasets = [
  {
    data: [3, 10, 4],
    label: 'Application number',
    yAxisID: 'y-axis-l', // 改为单数yAxisID
  },
  {
    data: [2, 4, 1],
    label: 'Applied',
    yAxisID: 'y-axis-l', // 改为单数yAxisID
  },
  {
    data: [66.66, 40, 25],
    label: 'Percent',
    type: 'line',
    yAxisID: 'y-axis-r', // 改为单数yAxisID
    backgroundColor: 'rgba(0,0,0,0)',
  },
];
options = {
    scales: {
      yAxes: [
        {
          id: 'y-axis-l',
          position: 'left',
          // 左侧轴其他配置
        },
        {
          id: 'y-axis-r',
          position: 'right',
          // 给右侧轴添加百分比刻度，贴合折线数据
          ticks: {
            callback: function(value) {
              return value + '%';
            }
          }
        },
      ],
    },
  };

修改后折线图就会正确绑定到右侧y轴。另外给右侧y轴加上百分比格式的刻度回调，能让轴的显示和折线数据更匹配。

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