我正在使用Chart.js创建一个图表,并且我的折线图的x轴有问题.我已经制作了一个多线图,一切都很好看,如下图所示.
我想要实现的是,当图表上有数据点时,我的x轴上的标签(日期)才会显示,所以现在不是所有的日子.我对整个Web开发工作没有那么多经验,所以任何帮助都会受到赞赏.提前致谢.
我想要实现的是,当图表上有数据点时,我的x轴上的标签(日期)才会显示,所以现在不是所有的日子.我对整个Web开发工作没有那么多经验,所以任何帮助都会受到赞赏.提前致谢.
我的代码如下：
function newDate(day,month) {
return moment().date(day).month(month);
}
var ctx = document.getElementById("chart_hr");
var tabPane = document.getElementById("overview_hr");
var data = {
labels: [newDate(8,8),newDate(10,newDate(12,newDate(17,newDate(21,newDate(23,newDate(28,newDate(1,9),newDate(4,9)],datasets: [
{
fill: false,data: [140,180,150,170],lineTension: 0,},{
fill: false,data: [80,100,80,100],}
]
};
var options = {
scales: {
xAxes: [{
type: 'time',time: {
displayFormats: {
'millisecond': 'DD MMM','second': 'DD MMM','minute': 'DD MMM','hour': 'DD MMM','day': 'DD MMM','week': 'DD MMM','month': 'DD MMM','quarter': 'DD MMM','year': 'DD MMM',unitStepSize: 1,unit: 'day',gridLines : {
display : false,}
}],yAxes: [{
ticks: {
min: 50,max: 190,stepSize: 10,};
var myLineChart = new Chart(ctx,{
type: 'line',data: data,options: options
});
解决方法
我通过使用ticks回调方法和设置autoSkip false解决了这个问题.但是,我没有使用Timescale.在回调中,您可以传递日期和所需格式,它将返回格式化日期.
下面是相同和工作示例代码的屏幕截图.
下面是相同和工作示例代码的屏幕截图.
[样本代码]
var ctx = document.getElementById("chart_hr");
function newDate(day,month) {
return moment().date(day).month(month);
}
var data = {
labels: [newDate(8,}
]
};
var options = {
scales: {
xAxes: [{
ticks: {
autoSkip : false,callback: function(value,index,values) {
return new moment(value).format('DD MMM');
}
},gridLines : {
display : false,}
}],yAxes: [{
ticks: {
min: 50,stepSize: 10
}
}],options: options
});