ChartJs 图表不会更新新值
ChartJs chart won't update new values
首先,对于破烂的英语感到抱歉。
我使用 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 条数据。
@urukh 原来我的回答有误。您确实需要为条形图添加 borderColor 和 backgroundColor。做了一个将数据添加到图表的小工作示例(请参阅下面的 index.html
)。
将数据添加到图表中的必要脚本(setInterval
是一个计时器。忽略有利于您的代码逻辑):
<script>
var i = 0;
setInterval(function()
{
console.log(myChart.data); // use this to examine the chart object for yourself
//directly pushing into the arrays
myChart.data.datasets[0].data.push(21);
myChart.data.datasets[0].backgroundColor.push('rgba(255,0,0,0.2)');
myChart.data.datasets[0].borderColor.push('rgba(255,0,0,1)');
myChart.data.datasets[1].data.push(21);
myChart.data.datasets[1].backgroundColor.push('rgba(255,255,0,0.2)');
myChart.data.datasets[1].borderColor.push('rgba(255,255,0,1)');
myChart.data.labels.push('hi' + i++);
//if chart dataset > 10, trim the array from the 1st element
if (myChart.data.datasets[0].data.length > 10)
{
myChart.data.datasets[0].data.shift();
myChart.data.datasets[1].data.shift();
myChart.data.datasets[0].backgroundColor.shift();
myChart.data.datasets[0].borderColor.shift();
myChart.data.datasets[1].backgroundColor.shift();
myChart.data.datasets[1].borderColor.shift();
myChart.data.labels.shift();
}
myChart.update();
}, 1000);
</script>
运行 此页面为 index.html
以查看实际图表。
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>
<div style="width:300px;height: 300px">
<canvas id="myChart" width="100px" height="100px"></canvas>
</div>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
},
{
label: '# of Votes 2',
data: [12, 5, 30, 5, 12, 23],
backgroundColor: [
'rgba(255, 0, 132, 0.2)',
'rgba(54, 0, 235, 0.2)',
'rgba(255, 0, 86, 0.2)',
'rgba(75, 0, 192, 0.2)',
'rgba(153, 0, 255, 0.2)',
'rgba(255, 0, 64, 0.2)'
],
borderColor: [
'rgba(255,0,132,1)',
'rgba(54, 0, 235, 1)',
'rgba(255, 0, 86, 1)',
'rgba(75, 0, 192, 1)',
'rgba(153, 0, 255, 1)',
'rgba(255, 0, 64, 1)'
],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
<script>
var i = 0;
setInterval(function()
{
console.log(myChart.data);
myChart.data.datasets[0].data.push(21);
myChart.data.datasets[0].backgroundColor.push('rgba(255,0,0,0.2)');
myChart.data.datasets[0].borderColor.push('rgba(255,0,0,1)');
myChart.data.datasets[1].data.push(21);
myChart.data.datasets[1].backgroundColor.push('rgba(255,255,0,0.2)');
myChart.data.datasets[1].borderColor.push('rgba(255,255,0,1)');
myChart.data.labels.push('hi' + i++);
if (myChart.data.datasets[0].data.length > 10)
{
myChart.data.datasets[0].data.shift();
myChart.data.datasets[1].data.shift();
myChart.data.datasets[0].backgroundColor.shift();
myChart.data.datasets[0].borderColor.shift();
myChart.data.datasets[1].backgroundColor.shift();
myChart.data.datasets[1].borderColor.shift();
myChart.data.labels.shift();
}
myChart.update();
}, 1000);
</script>
就像 Edwin Chua 在他的评论中提到的那样,问题是我没有为每个数据集添加新标签,因此我的图表已更新,但没有 'place' 显示信息。
函数的最终代码,如果有人需要它以供将来参考:
function updateChart1(data, sigla){
if(data != null){
var medias = [];
var meses = [];
jQuery.each(JSON.parse(data), function(index, val){
medias.push((val.soma_duracao/val.count_prot)/3600);
if(jQuery.inArray(val.mes, meses) == -1){
meses.push(getMes(val.mes));
}
});
var dtst = {
label: sigla,
data: medias,
backgroundColor: (pallete[0].rgba),
borderColor: (pallete[0].rgba.replace('0.7', '1')),
borderWidth: 2
}
chart1.data.labels = meses;
chart1.data.datasets.push(dtst);
if(chart1.data.datasets.length == 1){
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";
}
}
}
chart1.update();
}
我需要在打印后对图表进行第二次更新(我在黑白打印中使用了另一种背景颜色)。普通的 .update 方法没有帮助更新图表。我使用 setTimeout 和 0.
setTimeout(function(){
myChart.data.datasets[0].backgroundColor = ['#f2d13a', '#c9deeb', '#cacaca'];
myChart.update();
}, 0);
首先,对于破烂的英语感到抱歉。
我使用 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 条数据。
@urukh 原来我的回答有误。您确实需要为条形图添加 borderColor 和 backgroundColor。做了一个将数据添加到图表的小工作示例(请参阅下面的 index.html
)。
将数据添加到图表中的必要脚本(setInterval
是一个计时器。忽略有利于您的代码逻辑):
<script>
var i = 0;
setInterval(function()
{
console.log(myChart.data); // use this to examine the chart object for yourself
//directly pushing into the arrays
myChart.data.datasets[0].data.push(21);
myChart.data.datasets[0].backgroundColor.push('rgba(255,0,0,0.2)');
myChart.data.datasets[0].borderColor.push('rgba(255,0,0,1)');
myChart.data.datasets[1].data.push(21);
myChart.data.datasets[1].backgroundColor.push('rgba(255,255,0,0.2)');
myChart.data.datasets[1].borderColor.push('rgba(255,255,0,1)');
myChart.data.labels.push('hi' + i++);
//if chart dataset > 10, trim the array from the 1st element
if (myChart.data.datasets[0].data.length > 10)
{
myChart.data.datasets[0].data.shift();
myChart.data.datasets[1].data.shift();
myChart.data.datasets[0].backgroundColor.shift();
myChart.data.datasets[0].borderColor.shift();
myChart.data.datasets[1].backgroundColor.shift();
myChart.data.datasets[1].borderColor.shift();
myChart.data.labels.shift();
}
myChart.update();
}, 1000);
</script>
运行 此页面为 index.html
以查看实际图表。
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js">
</script>
<div style="width:300px;height: 300px">
<canvas id="myChart" width="100px" height="100px"></canvas>
</div>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
},
{
label: '# of Votes 2',
data: [12, 5, 30, 5, 12, 23],
backgroundColor: [
'rgba(255, 0, 132, 0.2)',
'rgba(54, 0, 235, 0.2)',
'rgba(255, 0, 86, 0.2)',
'rgba(75, 0, 192, 0.2)',
'rgba(153, 0, 255, 0.2)',
'rgba(255, 0, 64, 0.2)'
],
borderColor: [
'rgba(255,0,132,1)',
'rgba(54, 0, 235, 1)',
'rgba(255, 0, 86, 1)',
'rgba(75, 0, 192, 1)',
'rgba(153, 0, 255, 1)',
'rgba(255, 0, 64, 1)'
],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
<script>
var i = 0;
setInterval(function()
{
console.log(myChart.data);
myChart.data.datasets[0].data.push(21);
myChart.data.datasets[0].backgroundColor.push('rgba(255,0,0,0.2)');
myChart.data.datasets[0].borderColor.push('rgba(255,0,0,1)');
myChart.data.datasets[1].data.push(21);
myChart.data.datasets[1].backgroundColor.push('rgba(255,255,0,0.2)');
myChart.data.datasets[1].borderColor.push('rgba(255,255,0,1)');
myChart.data.labels.push('hi' + i++);
if (myChart.data.datasets[0].data.length > 10)
{
myChart.data.datasets[0].data.shift();
myChart.data.datasets[1].data.shift();
myChart.data.datasets[0].backgroundColor.shift();
myChart.data.datasets[0].borderColor.shift();
myChart.data.datasets[1].backgroundColor.shift();
myChart.data.datasets[1].borderColor.shift();
myChart.data.labels.shift();
}
myChart.update();
}, 1000);
</script>
就像 Edwin Chua 在他的评论中提到的那样,问题是我没有为每个数据集添加新标签,因此我的图表已更新,但没有 'place' 显示信息。
函数的最终代码,如果有人需要它以供将来参考:
function updateChart1(data, sigla){
if(data != null){
var medias = [];
var meses = [];
jQuery.each(JSON.parse(data), function(index, val){
medias.push((val.soma_duracao/val.count_prot)/3600);
if(jQuery.inArray(val.mes, meses) == -1){
meses.push(getMes(val.mes));
}
});
var dtst = {
label: sigla,
data: medias,
backgroundColor: (pallete[0].rgba),
borderColor: (pallete[0].rgba.replace('0.7', '1')),
borderWidth: 2
}
chart1.data.labels = meses;
chart1.data.datasets.push(dtst);
if(chart1.data.datasets.length == 1){
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";
}
}
}
chart1.update();
}
我需要在打印后对图表进行第二次更新(我在黑白打印中使用了另一种背景颜色)。普通的 .update 方法没有帮助更新图表。我使用 setTimeout 和 0.
setTimeout(function(){
myChart.data.datasets[0].backgroundColor = ['#f2d13a', '#c9deeb', '#cacaca'];
myChart.update();
}, 0);