双Y轴图上的Chart.js注释水平线

216

布兰登·邦

我一直在寻找可能在代码中犯的错误，但水平线始终不出现在图形上。是因为我的双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'
            }
          }]
        }
      }
    });

这是我的图的结果：

兴奋剂

您已将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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。