首先，很抱歉英语不好。
我使用 ChartJS 生成图表有一段时间了，但今天我偶然发现了一个我似乎无法找到答案的问题。我正在使用一个函数将数据动态添加到我的图表中，然后对其进行更新。当我只需要添加另一个数据集时它就可以工作，但是当我尝试编辑现有数据集时，我可以将值（似乎正确）获取到图表数据集中，但是，图表不会显示新值，即使在之后一个更新（）。
HTML：
<div class="row">
<img id="loading1" class="loading" src="resources/img/loading2.gif" hidden>
<div id="chart1-wrapper" class="chart-wrapper">
<canvas id="chart1"></canvas>
</div>
</div>
<script>
var ctx = document.id("chart1").getContext("2d");
var chart1 = create_chart("chart title", "label text", "bar"); //Custom code that just create an empty chart;
</script>
创建图表的函数：
function create_chart(title, label_prefix, type) {
var data = {
labels: [],
datasets: []
};
var options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
legend: {
display: true
},
title: {
display: true,
text: title
},
tooltips: {
intersect: false,
mode: 'x',
callbacks: {
title: function() {}
}
},
maintainAspectRatio: false,
onClick: handleClick
};
var chart = new Chart(ctx, {
type: type,
data: data,
options: options
});
return chart;
}这是我的更新脚本：
function updateChart1(data, sigla){
var dtsts;
if(data != null){
if(chart1.data.datasets.length == 0){
dtsts = [];
jQuery.each(JSON.parse(data), function(index, val){
var media = (val.soma_duracao/val.count_prot)/3600;
var dt_item = {
label: getMes(val.mes),
data: [media],
backgroundColor: [(pallete[0].rgba)],
borderColor: [(pallete[0].rgba.replace('0.7', '1'))],
borderWidth: 2
}
dtsts.push(dt_item);
});
console.log(dtsts);
chart1.data.labels = ['hours'];
chart1.options.title.text = "foo bar";
chart1.options.title.display = true;
chart1.options.legend = true;
chart1.options.tooltips.callbacks.label = function(tooltipItems, data) {
return tooltipItems.yLabel.toFixed(2) + " hours";
}
} else {
dtsts = chart1.data.datasets;
jQuery.each(JSON.parse(data), function(index, val){
var media = (val.soma_duracao/val.count_prot)/3600;
dtsts[index].data.push(media);
dtsts[index].backgroundColor.push(pallete[1].rgba);
dtsts[index].borderColor.push(pallete[1].rgba.replace('0.7', '1'));
});
console.log(dtsts);
}
chart1.data.datasets = dtsts;
}
chart1.update();
}
我第一次得到这个时运行脚本：
data:Array(1)
0:83.83071111111111
length:1
pop:ƒ ()
push:ƒ ()
shift:ƒ ()
splice:ƒ ()
unshift:ƒ ()
_chartjs: {listeners: Array(1)}
__proto__: Array(0)
再次运行它会更新我的数据：
data:Array(2)
0:83.83071111111111
1:13.746988158477201
length:2
pop:ƒ ()
push:ƒ ()
shift:ƒ ()
splice:ƒ ()
unshift:ƒ ()
_chartjs:{listeners: Array(1)}
__proto__:Array(0)
这是我的数据的正确值，但是，图表根本不会更新以显示这些值。
我不确定这是否是一些愚蠢的错误，但我现在迷路了。如果有人能发光，那就太好了。谢谢！
（PS：如果你们需要更多信息，请告诉我）
编辑 只是为了澄清，更新后我需要同一数据集中的两个数据，2条数据。