Chart.js不随两个y轴缩放

qncylg1j  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(192)

我 努力 让 第 二 个 y 轴 缩放 到 第 二 个 数据 数组 。 绿色 数据 应该 根据 右 y 轴 缩放 ( 不 工作 ) 。 红色 数据 正确 地 缩放 到 左 y 轴 。

<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: 0
                },
                {
                  label: 'Niederschlagsmenge in mm',
                  yAxisID: 'B',
                  borderColor: "blue",
                  data: 0
                }]
              },
              options: {
                scales: {
                  A: {
                    type: 'linear',
                    beginAtZero: false,
                    position: 'left',
                    display: true
                  },
                  B: {
                    type: 'linear',
                    beginAtZero: false,
                    position: 'right',
                    display: true
                  }
                }
              }
            });

          </script>
        </div>

中 的 每 一 个
不要 与 数据 为 0 相 混淆 , 我 动态 地 添加 数据 。
非常 感谢 你 的 帮助 。

gdx19jrr

gdx19jrr1#

这是因为您使用的是chart.js的V2,其中的秤需要配置为数组,如下所示:

new Chart(ctx, {
  type: 'line',
  data: {},
  options: {
    scales: {
      yAxes: [{
        id: 'A'
      }, {
        id: 'B'
      }]
    }
  }
})

相关问题