动态创建的 Chart.js 图表基于时间的 x 轴填充过多?
Dynamically created Chart.js chart overpopulating time based x-axis?
我想创建一个 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
,但没有成功
问题是由于 x-axis 上定义的选项 ticks.source: 'labels'
引起的。您应该将其更改为 ticks.source: 'data'
或简单地省略它并让 Chart.js 选择最佳选项。
此外,当使用 t
和 y
属性将数据提供为 data points 时,无需定义 chart.data.labels
.
success: function(json){
var dates = json['dates'].map(v => new Date(v).toLocaleString())
chart.data.labels.push(dates); // remove this line
...
我想创建一个 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
,但没有成功
问题是由于 x-axis 上定义的选项 ticks.source: 'labels'
引起的。您应该将其更改为 ticks.source: 'data'
或简单地省略它并让 Chart.js 选择最佳选项。
此外,当使用 t
和 y
属性将数据提供为 data points 时,无需定义 chart.data.labels
.
success: function(json){
var dates = json['dates'].map(v => new Date(v).toLocaleString())
chart.data.labels.push(dates); // remove this line
...