我想通过提供两个数组来创建多条垂直线,第一个称为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
}
}]
}
最佳答案
考虑到您有两个数组(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 .
关于jquery - ChartJS/Chartjs-plugin-annotation 如何使用数组绘制多条垂直线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47018735/