javascript ChartJS - 按月绘制带有标签的图表，按天绘制数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29925431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ChartJS - Draw chart with label by month, data by day
提问by user4557573
I'd like to draw a line chart by Chartjswith data by day, but label by month.
我想用Chartjs按天绘制折线图，但按月标记。
If label is displayed by day, then there are a lot of points. So, I'd like to display label by month instead of by day. For example:
如果标签按天显示，那么有很多点。所以，我想按月而不是按天显示标签。例如：
Someone could teach me how to do that?
有人可以教我怎么做吗？
Thank you.
谢谢你。
回答by David Merino
Just config your xAxes->time property as:
unit: 'month'
只需将您的 xAxes->time 属性配置为：
unit: 'month'
xAxes: [{
type: 'time',
position: 'bottom',
time: {
displayFormats: {'day': 'MM/YY'},
tooltipFormat: 'DD/MM/YY',
unit: 'month',
}
}],回答by emerson-pereira
The labelsarray and the dataarray have to match.
Therefore what you will need to do is calculate your values to be hold in data array in to match your labels
的labels阵列和data阵列必须匹配。因此，您需要做的是计算要保存在数据数组中的值以匹配您的标签
data: {
labels: ["Jan", "Feb", "March", ...],
datasets: [{
label: '# of Votes',
data: [01, 02, 03, ...],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
...
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
...
],
borderWidth: 1
}]
},
Does that solve your doubt?
这能解决你的疑惑吗？
回答by eflamm
This question is quite old now, but I have found a workaround using the afterTickToLabelConversionfunctionnality. I formatted the date, and left only one label for every month (the rest of the labels are transformed to empty quotes).
Here is the snippet to put in your graph option :
这个问题现在已经很老了，但我找到了使用该afterTickToLabelConversion功能的解决方法。我格式化了日期，每个月只留下一个标签（其余的标签被转换为空引号）。
这是放入图形选项的代码段：
scales: {
xAxes: [{
type: 'time',
position: 'bottom',
time: {
displayFormats: {
'day': 'MM/YY'
},
tooltipFormat: 'DD/MM/YY',
unit: 'day',
},
// leave only one label per month
afterTickToLabelConversion: function (data) {
var xLabels = data.ticks;
var oldLabel = "";
xLabels.forEach(function (labels, i) {
if(xLabels[i] == oldLabel){
xLabels[i] = "";
} else {
oldLabel = xLabels[i];
}
});
}
}]
}
