jquery - 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]
      }
   }
});

查看working example .