我已经用Chartjs做了几个小时的实验,但我不确定这是否可行。我有一些按日期排序的数据,但并不是所有日期都包括在内。例如:
const salesChart = new Chart(document.getElementById('graph-sales'),
{
type: 'line',
data: {
labels: ['Aug 23','Aug 26','Aug 31','Sep 02'],
datasets: [{
label: 'Sales',
borderColor: '#ccc',
data: [2750.00,1100.00,3080.00,4320.00],
}]
}
}
);
Chartjs将此数据绘制为4个数据点,并使用
这样的线将它们连接起来
这很好,但我希望在图表上添加中间日期,数据点值为0。因此,本质上就像传递以下数据:
labels: ['Aug 23','Aug 24','Aug 25','Aug 26','Aug 27','Aug 28','Aug 29','Aug 30','Aug 31','Sep 01','Sep 02'],
datasets: [{
label: 'Sales',
borderColor: '#ccc',
data: [2750.00,0,0,1100.00,0,0,0,0,3080.00,0,4320.00],
}]
我看过时间刻度,但不能让它们工作。文档说我需要一个时间适配器,但没有使用它的例子,所以我不知道这是什么意思。
1条答案
按热度按时间bbuxkriu1#
在提供数据的后端执行此操作可能会更容易;但是如果您想在前端用JavaScript编写,这段代码就可以工作。
我的方法是使用一个定义的自执行函数,该函数返回一个包含两个数组的数组。
第一个数组名为finalLabels,包含原始标签中提供的日期之间(含)的所有日期字符串。
也就是
['Aug 23', 'Aug 24', 'Aug 25', 'Aug 26', 'Aug 27', 'Aug 28', 'Aug 29', 'Aug 30', 'Aug 31', 'Sep 01', 'Sep 02']
返回的第二个数组称为finalDatas,它包含原始标签的同一索引处的所有原始数据值;而在先前未定义该值的情况下则为零。
这就给了我们:
[2750, 0, 0, 1100, 0, 0, 0, 0, 3080, 0, 4320]
个工作代码代号:https://codepen.io/vpolston/pen/NWMgwOw
我的帐户没有嵌入图片的功能,但这是你最终得到的:是的。
JS系统
HTML语言
CSS系统
我想这就够了吧?如果这有帮助的话,请马克回答。