我使用以下代码使用chart js插件生成折线图,其中我面临x轴值重复两次的问题。
function newDate(days) {
return moment().add(days, 'd').format('MM/DD');
}
var painChartContext = document.getElementById('pain_chart');
var painChart = new Chart(painChartContext, {
type: 'line',
data: {
labels: [newDate(-7), newDate(-6), newDate(-5), newDate(-4), newDate(-3), newDate(-2), newDate(-1)],
datasets: [{
label: "Pain",
data: [8, 9, 7, 3, 10, 3, 4],
fill: false,
borderColor: '#b71705',
spanGaps: true
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
'millisecond': 'MM/DD',
'second': 'MM/DD',
'minute': 'MM/DD',
'hour': 'MM/DD',
'day': 'MM/DD',
'week': 'MM/DD',
'month': 'MM/DD',
'quarter': 'MM/DD',
'year': 'MM/DD',
},
min: '04/13',
max: '04/19'
}
}],
},
}
});
正如我上面提到的,这给了我下面的图表,其中x轴日期值重复了两次。x1c 0d1x
同样在我的控制台中,我收到了一条关于moment js的警告消息;
弃用警告:moment构造福尔斯又回到了js Date。这是不鼓励的,并将在即将到来的主要版本中删除。请参阅https://github.com/moment/moment/issues/1407了解更多信息。
我想是因为这行代码
function newDate(days) {
return moment().add(days, 'd').format('MM/DD');
}
请任何人给予给我一个解决办法,谢谢。
1条答案
按热度按时间vfh0ocws1#
因此,chartjs动态地创建了x轴标签,并决定每天显示两个标签,格式化后最终显示两个相同的日期。
将一个新字段
unit
传递给time
对象,并将其设置为day
。这将导致图表在时间范围内每天仅显示一个刻度。(example fiddle)