我正在使用Chart.js制作图表,但关于折线图的x轴存在问题。我已经制作了多线图,如下图所示,一切看起来都还不错。我要实现的是,仅当图表上有数据点时,才会显示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,8), newDate(12,8), newDate(17,8), newDate(21,8), newDate(23,8), newDate(28,8), newDate(1,9), newDate(4,9)],
datasets: [
{
fill: false,
data: [140, 180, 150, 150, 180, 150, 150, 150, 170],
lineTension: 0,
},
{
fill: false,
data: [80, 100, 80, 80, 80, 80, 100, 80, 100],
lineTension: 0,
}
]
};
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,8), newDate(10,8), newDate(12,8), newDate(17,8), newDate(21,8), newDate(23,8), newDate(28,8), newDate(1,9), newDate(4,9)],
datasets: [
{
fill: false,
data: [140, 180, 150, 150, 180, 150, 150, 150, 170],
lineTension: 0,
},
{
fill: false,
data: [80, 100, 80, 80, 80, 80, 100, 80, 100],
lineTension: 0,
}
]
};
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,
max: 190,
stepSize: 10
}
}],
},
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句