我想创建一个chart.js折线图,其y轴上的值和x轴上的日期。但是,当我填充图表时,x轴上填充了不应包含的刻度(您可以看到我的数据在最右端模糊了)。当我登录时,chart.data.labels
一切似乎都正确;这是输出: Array(3) ["10/23/2020, 12:00:00 AM", "10/27/2020, 12:00:00 AM", "10/28/2020, 12:00:00 AM"]
。
当我注释掉时间xAxes[0].type=time
并按xAxes.time
预期加载数据时,所有标签都堆叠在x轴的左角。我不确定如何继续使图表仅显示日期标签。我在下面包含了我的代码:
var chart = new Chart(document.getElementById("grade-chart"), {
type: 'line',
options: {
legend: {display: true},
title: {
display: true,
text: 'Project Grading'
},
scales: {
xAxes: [{
type: 'time',
distribution: 'linear',
scaleLabel: {
display: true,
labelString: 'Date Surveyed'
},
time: {
unit: 'month',
bounds: 'data',
minUnit: 'day',
ticks: {
source: 'labels'
}
},
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Scores'
},
ticks: {
beginAtZero: true,
max: 100
}
}]
},
}
});
$.ajax({
method: 'get',
url: '/admin/project/project_grade_detail_chart/project_id/' + $("#project-id").val(),
dataType: 'json',
success: function(json){
var dates = json['dates'].map(v => new Date(v).toLocaleString())
chart.data.labels.push(dates);
Object.keys(json).forEach(function(name) {
if(name != 'dates') {
chart.data.datasets.push({
data: json[name].map((value, i) => ({'t': dates[i], 'y': value})),
label: name,
borderColor: randColor(),
fill: false
});
}
});
chart.update(0);
console.log(chart.data.labels)
}
});
编辑:我尝试添加autoskip
并maxticks
按照https://stackoverflow.com/a/39326127/5574063进行操作,但未成功
问题是由于ticks.source: 'labels'
在x轴上定义了选项。您应该将其更改为ticks.source: 'data'
或简单地忽略它,然后让Chart.js选择最佳选项。
同样,在使用和属性将数据作为数据点提供时,也无需定义。t
y
chart.data.labels
success: function(json){
var dates = json['dates'].map(v => new Date(v).toLocaleString())
chart.data.labels.push(dates); // remove this line
...
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句