ChartJS 多注解（竖线）

Question

我正在尝试使用注释插件在 chart.JS 图表上放置 2 条垂直线。我正在使用以下版本： 图表.js = 2.8.0 注释插件 = 0.5.7

这是JSFiddle

请看下面我的代码：

var ann = ["4.35"];
var ann_labels = ["start"];
var annotations_array = ann.map(function(value, index) {
    return {
        type: 'line',
        id: 'vline' + index,
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: value,
        borderColor: 'green',
        borderWidth: 1,
        label: {
            enabled: true,
            position: "bottom",
            content: ann_labels
        }
    }
});

var ann2 = ["4.29"];
var ann_labels2 = ["stop"];
var annotations_array2 = ann2.map(function(value, index) {
    return {
        type: 'line',
        id: 'vline2' + index,
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: value,
        borderColor: 'green',
        borderWidth: 1,
        label: {
            enabled: true,
            position: "top",
            content: ann_labels2
        }
    }
});

var ctx = document.getElementById('test').getContext('2d');
var test = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["1.44","4.03","4.35","3.99","3.58","3.75","4.29","5.02","5.95","6.65"],
        datasets: [{
            data: ["1", "2", "1", "2", "1", "2", "1", "2", "1", "2"],
            yAxisID: 'A',
            backgroundColor: [
                'rgba(91, 192, 222, 0.1)',
            ],
            borderColor: [
                'rgba(0, 123, 255, 0.8)',
            ],
            borderWidth: 1.3,
        },
        {
            data: ["10", "11", "12","13","14","15","16","17",],
            yAxisID: 'B',
            backgroundColor: [
                'rgba(255, 206, 86, 0.0)',
            ],
            borderColor: [
                'rgba(217, 83, 79, 0.6)',
            ],
            borderWidth: 1.3,
        }]
    },
    options: {
        annotation: {
            drawTime: 'afterDatasetsDraw',
            annotations: annotations_array
        },
        maintainAspectRatio: true,
        scales: {
            yAxes: [{
              id: 'A',
              ticks: {
                callback: function(value, index, values) {
                        return value + ' m';
                },
                reverse: true,
              }
            },
            {
              id: 'B',
              position: 'right',
              ticks: {
                callback: function(value, index, values) {
                        return value + ' °C';
                },
                reverse: true,
              }                
            }]
          },
        elements: {
            point:{
                radius: 0,
            }
        },
        legend: {
            position: 'bottom',
            display: false,
        },
    }
});

但是，我无法同时显示两条垂直线（annotations_array 和 annotations_array2）。

当我这样做时一切正常： annotations: annotations_array 或这个： annotations: annotations_array2 但是当我尝试打印两个数组时，它不起作用： annotations: annotations_array, annotations_array2

我也试过这个，没有运气：

annotations: [{annotations_array},{annotations_array2}]

有谁知道我做错了什么？

提前致谢！

Answer 1

您必须提供两个注释作为 1 个数组中的对象，而不是包含包含数组的对象的数组，请参见示例：

var ann = ["4.35", "4.29"];
var ann_labels = ["start", "stop"];
var annotations_array = ann.map(function(value, index) {
  return {
    type: 'line',
    id: 'vline' + index,
    mode: 'vertical',
    scaleID: 'x-axis-0',
    value: value,
    borderColor: 'green',
    borderWidth: 1,
    label: {
      enabled: true,
      position: "bottom",
      content: ann_labels[index]
    }
  }
});

var ctx = document.getElementById('test').getContext('2d');
var test = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["1.44", "4.03", "4.35", "3.99", "3.58", "3.75", "4.29", "5.02", "5.95", "6.65"],
    datasets: [{
        data: ["1", "2", "1", "2", "1", "2", "1", "2", "1", "2"],
        yAxisID: 'A',
        backgroundColor: [
          'rgba(91, 192, 222, 0.1)',
        ],
        borderColor: [
          'rgba(0, 123, 255, 0.8)',
        ],
        borderWidth: 1.3,
      },
      {
        data: ["10", "11", "12", "13", "14", "15", "16", "17", ],
        yAxisID: 'B',
        backgroundColor: [
          'rgba(255, 206, 86, 0.0)',
        ],
        borderColor: [
          'rgba(217, 83, 79, 0.6)',
        ],
        borderWidth: 1.3,
      }
    ]
  },
  options: {
    annotation: {
      drawTime: 'afterDatasetsDraw',
      annotations: annotations_array
    },
    maintainAspectRatio: true,
    scales: {
      yAxes: [{
          id: 'A',
          ticks: {
            callback: function(value, index, values) {
              return value + ' m';
            },
            reverse: true,
          }
        },
        {
          id: 'B',
          position: 'right',
          ticks: {
            callback: function(value, index, values) {
              return value + ' °C';
            },
            reverse: true,
          }
        }
      ]
    },
    elements: {
      point: {
        radius: 0,
      }
    },
    legend: {
      position: 'bottom',
      display: false,
    },
  }
});

<h3 class="card-text"><canvas id="test"></canvas></h3>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js"></script>

小提琴：https://jsfiddle.net/Leelenaleee/6Ltycqfh/7/