将0值自动填充为未定义的xAxes
将0值自动填充为未定义的xAxes
提问于 2019-06-27 07:34:25
我得到了一系列数据，表示一天的下载量，但在chart.js上，如果我跳过一天，yAxes不会自动将跳过的一天填充为0，而是跳过xAxes，而不显示任何数据。
下面是一个数组labels: [ 'Wed Jun 26 2019', 'Tue Jun 25 2019', 'Mon Jun 24 2019', 'Sun Jun 23 2019', // Skipped a day here 'Fri Jun 21 2019', 'Wed Jun 12 2019', 'Mon Jun 10 2019', 'Fri Jun 07 2019' ] values: [5, 2, 1, 4, 3, 5, 1, 4]的示例
this.chart = new Chart(this.$refs.chart, {
type: 'line',
data: {
labels: labels,
datasets: [
{
data: values
}
]
},
options: {
scales: {
xAxes: [
{
type: 'time',
distribution: 'linear',
time: {
displayFormats: {
hour: 'MMM DD'
},
min: new Date().getTime() - 86400000 * 7, // Displaying data from last 7 days
max: new Date().getTime()
},
ticks: {
maxTicksLimit: 6,
fontFamily: 'Quicksand'
}
}
],
yAxes: [
{
ticks: {
maxTicksLimit: 4,
fontFamily: 'Quicksand'
}
}
]
}
}
})下面是我的chart.js输出：
如您所见，6月22日和6月27日被跳过，而不是自动填充为0。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-27 08:47:32
我创建了这个插件的基础上的线程正确的here，它是美丽的工作
beforeInit(labels, values) {
let min, max, newLabels = [], newData = [], assoc = {}
/*
Loop through the dates (config labels).
Find the min and max date, and add all dates/values to assoc.
*/
let dates = labels
for(let i = 0; i < dates.length; i++){
/* Current date */
let val = moment(dates[i])
/* If current date the min, set as min */
if(!min || min.diff(val) > 0)
min = val
/* Store all in assoc array */
assoc[val.format('DD MMM')] = values[i]
}
max = moment(new Date().getTime())
/* From the min date, and looping by minUnit until max date */
for(let d = min; max.diff(d) > 0; d.add(1, 'day')) {
/* Current date */
let cur = d.format('DD MMM')
newLabels.push(cur)
/* Add zero for day if not represented */
if (!assoc[cur]) {
newData.push(0)
} else {
newData.push(assoc[cur])
}
}
return { newData, newLabels }
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56782157
复制相关文章
相似问题