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

Question

我想通过提供两个数组来创建多个垂直线，第一个叫marketing，其中包含"2017-09-21"等日期，还有一个名为amount的数组，只包含数字。< / p>

我使用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];

您可以根据其中一个（marketing / amount）动态创建/填充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]
      }
   }
});

查看working example。