Chart.js双Y轴缩放异常求助：右侧Y轴无法适配对应数据集

你的问题核心是数据集的data格式不符合Chart.js要求，导致右侧Y轴无法和蓝色数据集关联生效。Chart.js要求data必须是数组类型，哪怕所有值都是0，不能直接写data: 0。

修改方案很简单，把两个数据集的data改成和labels长度匹配的数组：

<div id="chartWrapper" class="card-content column is-two-thirds">
  <canvas id="myChart" height="250px"></canvas>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
        datasets: [{
          label: 'Temperatur in C°',
          yAxisID: 'A',
          borderColor: "red",
          data: Array(24).fill(0) // 改成和labels长度一致的数组
        },
        {
          label: 'Niederschlagsmenge in mm',
          yAxisID: 'B',
          borderColor: "blue",
          data: Array(24).fill(0) // 同样改成数组
        }]
      },
      options: {
        scales: {
          A: {
            type: 'linear',
            beginAtZero: false,
            position: 'left',
            display: true
          },
          B: {
            type: 'linear',
            beginAtZero: false,
            position: 'right',
            display: true
          }
        }
      }
    });
  </script>
</div>

原因说明 #

当data不是数组时，Chart.js无法正确解析数据集的结构，右侧Y轴因为没有对应的有效数据关联，所以不会渲染生效。即使后续要动态添加数据，初始化阶段也必须保证data是数组格式，否则图表的轴关联逻辑会直接失效。

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