Chart.js 在双 y 轴图上标注水平线

Question

我一直在寻找我在代码中可能犯的错误，但水平线仍然没有出现在我的图表上。是因为我的双y轴图吗？

下面是我的图表代码：

var canvas = document.getElementById('chart').getContext("2d");
    new Chart(canvas, {
      type: 'line',
      data: {
        labels: ['Morning 6am-12pm', 'Afternoon 12pm-4pm', 'Evening 4pm-7pm', 'Night 7pm-12am', 'Dawn 12am-6am'],
        datasets: [{
          label: 'Temperature',
          yAxisID: 'A',
          data: [30, 32, 33, 31, 30]
        }, {
          label: 'Humidity',
          yAxisID: 'B',
          data: [80, 77, 74, 79, 83],
            lineTension: 0.3,
            fill: false,
            borderColor: 'lightblue',
            backgroundColor: 'transparent',
            pointBorderColor: 'lightblue',
            pointBackgroundColor: 'lightgreen',
            pointRadius: 5,
            pointHoverRadius: 15,
            pointHitRadius: 30,
            pointBorderWidth: 2
        }]
      },
      options: {
        scales: {
          yAxes: [{
            id: 'A',
            type: 'linear',
            position: 'left',
          }, {
            id: 'B',
            type: 'linear',
            position: 'right',
            ticks: {
              max: 100,
              min: 0
            }
          }]
        }, 
          annotation: {
            annotations: [{
            type: 'line',
            mode: 'horizontal',
            scaleID: 'y-axis-0',
            value: 32,
            borderColor: 'rgb(75, 0, 0)',
            borderWidth: 4,
            label: {
              enabled: false,
              content: 'Test label'
            }
          }]
        }
      }
    });

这是我的图表的结果：

Answer 1

您已将 y 轴的 ID 更改为 A 和 B：

yAxes: [{
    id: 'A',
    ...
}, {
    id: 'B',
    ...

在annotation 插件配置中，您告诉它使用y-axis-0（这是默认 ID）：

annotation: {
    annotations: [{
        scaleID: 'y-axis-0',
        ...

将配置更改为您想要将注释绘制到的任何 y 轴：

scaleID: 'A'

---

编辑：Chart.js 2.7.2 的工作示例

var canvas = document.getElementById('chart').getContext("2d");
    new Chart(canvas, {
      type: 'line',
      data: {
        labels: ['Morning 6am-12pm', 'Afternoon 12pm-4pm', 'Evening 4pm-7pm', 'Night 7pm-12am', 'Dawn 12am-6am'],
        datasets: [{
          label: 'Temperature',
          yAxisID: 'A',
          data: [30, 32, 33, 31, 30]
        }, {
          label: 'Humidity',
          yAxisID: 'B',
          data: [80, 77, 74, 79, 83],
            lineTension: 0.3,
            fill: false,
            borderColor: 'lightblue',
            backgroundColor: 'transparent',
            pointBorderColor: 'lightblue',
            pointBackgroundColor: 'lightgreen',
            pointRadius: 5,
            pointHoverRadius: 15,
            pointHitRadius: 30,
            pointBorderWidth: 2
        }]
      },
      options: {
        scales: {
          yAxes: [{
            id: 'A',
            type: 'linear',
            position: 'left',
          }, {
            id: 'B',
            type: 'linear',
            position: 'right',
            ticks: {
              max: 100,
              min: 0
            }
          }]
        }, 
          annotation: {
            annotations: [{
            type: 'line',
            mode: 'horizontal',
            scaleID: 'A',
            value: 32,
            borderColor: 'rgb(75, 0, 0)',
            borderWidth: 4,
            label: {
              enabled: false,
              content: 'Test label'
            }
          }]
        }
      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="chart"></canvas>