ChartJS / Chartjs-plugin-annotation如何使用数组绘制多条垂直线？

Question

我想通过提供两个数组来创建多个垂直线，第一个数组名为marketing，它包含诸如"2017-09-21"等日期，另一个数组名为amount，它只包含数字。

我已经使用ChartJS创建了我的折线图。最终的结果应该是这样的，但是有多行。

​

到目前为止，以下是我的代码

annotation: {
    drawTime: 'afterDatasetsDraw',
    annotations: [{
        type: 'line',
        mode: 'vertical',
        scaleID: 'x-axis-0',
        value: marketing,
        borderColor: 'green',
        borderWidth: 1,
        label: {
            enabled: true,
            position: "center",
            content: amount
        }
    }]
}

Answer 1

考虑到您有两个数组(marketing和amount)：

var marketing = ['2017-08-05', '2017-08-12'];
var amount = [50, 70];

您可以基于其中一个数组(营销/金额)动态创建/填充annotations数组，以绘制多条垂直线，如下所示：

// populate 'annotations' array dynamically based on 'marketing'
var annotations = marketing.map(function(date, index) {
   return {
      type: 'line',
      id: 'vline' + index,
      mode: 'vertical',
      scaleID: 'x-axis-0',
      value: date,
      borderColor: 'green',
      borderWidth: 1,
      label: {
         enabled: true,
         position: "center",
         content: amount[index]
      }
   }
});

请参阅。