我正在用Chart.js做一个时间图表按天显示值,我不知道如何自定义x轴标签按月分组
x 轴的值按月/日(1 月 6 日)显示,想法是整个一月只显示一月的标签,依此类推
var s1 = {
label: 'Enero',
borderColor: "rgba(220,20,20,1)",
backgroundColor: "rgba(220,20,20,0.5)",
data: [
{x: '2017-01-06', y: 100},
{x: '2017-01-07', y: 150},
{x: '2017-01-08', y: 90},
{x: '2017-01-09', y: 180},
{x: '2017-01-10', y: 200},
{x: '2017-01-11', y: 210},
{x: '2017-01-12', y: 56},
{x: '2017-01-13', y: 101},
{x: '2017-01-14', y: 105},
{x: '2017-01-15', y: 201},
{x: '2017-01-16', y: 500},
{x: '2017-01-17', y: 710},
{x: '2017-01-18', y: 650},
{x: '2017-01-19', y: 611},
{x: '2017-01-20', y: 450},
{x: '2017-01-21', y: 101},
{x: '2017-01-22', y: 200},
{x: '2017-01-23', y: 101},
{x: '2017-01-24', y: 300},
{x: '2017-01-25', y: 661},
{x: '2017-01-26', y: 250},
{x: '2017-01-27', y: 301},
{x: '2017-01-28', y: 400},
{x: '2017-01-29', y: 501},
{x: '2017-01-30', y: 600},
{x: '2017-01-31', y: 701},
]
};
var s2 = {
label: 'Febrero',
borderColor: "rgba(220,20,20,1)",
backgroundColor: "rgba(220,20,20,0.5)",
data: [
{x: '2017-02-01', y: 100},
{x: '2017-02-02', y: 150},
{x: '2017-02-03', y: 90},
{x: '2017-02-04', y: 180},
{x: '2017-02-05', y: 180},
{x: '2017-02-06', y: 100},
{x: '2017-02-07', y: 150},
{x: '2017-02-08', y: 90},
{x: '2017-02-09', y: 180},
{x: '2017-02-10', y: 200},
{x: '2017-02-11', y: 210},
{x: '2017-02-12', y: 56},
{x: '2017-02-13', y: 101},
{x: '2017-02-14', y: 105},
{x: '2017-02-15', y: 201},
{x: '2017-02-16', y: 500},
{x: '2017-02-17', y: 710},
{x: '2017-02-18', y: 650},
{x: '2017-02-19', y: 611},
{x: '2017-02-20', y: 450},
{x: '2017-02-21', y: 101},
{x: '2017-02-22', y: 200},
{x: '2017-02-23', y: 101},
{x: '2017-02-24', y: 300},
{x: '2017-02-25', y: 661},
{x: '2017-02-26', y: 250},
{x: '2017-02-27', y: 301},
{x: '2017-02-28', y: 400},
]
};
var config = {
type: 'bar',
data: {datasets: [s1, s2]},
options: {
scales: {
xAxes: [{
type: "time",
time: {
unit: 'day',
round: 'day',
displayFormats: {
day: 'MMM D'
}
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
您可以通过将格式更改为
MMM
并添加maxTicksLimit
如下来实现: