javascript Chart.js 更新数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46075566/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chart.js updating data
提问by Damien
I want to add to my chart setTimeout function to updated data. Have code listed below but console is saying Uncaught TypeError: Cannot read property 'data' of undefined"how to acces data array? and put my mew values? error is logging at the end of this code. in var ChartLine. Or maybe if you have any other idea how to update dynamically data please share your answer
我想添加到我的图表 setTimeout 函数来更新数据。下面列出了代码，但控制台说Uncaught TypeError: Cannot read property 'data' of undefined"how to access data array? and put my mew values? error is logging at the end of this code. in var ChartLine。或者也许如果你有任何其他想法如何动态更新数据请分享您的答案
var ctx = document.getElementById('chart').getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
datasets: [{
label: "Data",
borderColor: gradientStroke,
pointBorderColor: gradientStroke,
pointBackgroundColor: gradientStroke,
pointHoverBackgroundColor: gradientStroke,
pointHoverBorderColor: gradientStroke,
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: true,
backgroundColor: gradientFill,
borderWidth: 2,
data: [50, 80, 130, 65, 100, 66, 86],
}]
},
options: {
legend: {
position: "top"
},
scales: {
yAxes: [{
ticks: {
fontColor: "rgba(255,255,255,0.5)",
fontStyle: "bold",
beginAtZero: true,
maxTicksLimit: 5,
padding: 20
},
gridLines: {
drawTicks: false,
display: false
}
}],
xAxes: [{
gridLines: {
zeroLineColor: "rgba(255,255,255,0.5)"
},
ticks: {
padding: 20,
fontColor: "rgba(255,255,255,0.5)",
fontStyle: "bold"
}
}]
}
}
});
setTimeout(function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push([45, 45, 45, 15, 3]);
});
chart.update();
}, 2000);
thanks you for any help
谢谢你的帮助
回答by ?????
You should be updating the chart data as follows :
您应该按如下方式更新图表数据：
setTimeout(function() {
addData(myChart, [45, 50, 30, 34, 61, 53, 42], 0);
}, 2000);
function addData(chart, data, datasetIndex) {
chart.data.datasets[datasetIndex].data = data;
chart.update();
}
Working Example
工作示例
var gradientStroke = 'rgba(0, 119, 220, 0.6)',
gradientFill = 'rgba(0, 119, 220, 0.4)';
var ctx = document.getElementById('chart').getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL"],
datasets: [{
label: "Data",
borderColor: gradientStroke,
pointBorderColor: gradientStroke,
pointBackgroundColor: gradientStroke,
pointHoverBackgroundColor: gradientStroke,
pointHoverBorderColor: gradientStroke,
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: true,
backgroundColor: gradientFill,
borderWidth: 2,
data: [50, 80, 130, 65, 100, 66, 86],
}]
},
options: {
responsive: false,
legend: {
position: "top"
},
scales: {
yAxes: [{
ticks: {
fontColor: "rgba(255,255,255,0.5)",
fontStyle: "bold",
beginAtZero: true,
maxTicksLimit: 5,
padding: 20
},
gridLines: {
drawTicks: false,
display: false
}
}],
xAxes: [{
gridLines: {
zeroLineColor: "rgba(255,255,255,0.5)"
},
ticks: {
padding: 20,
fontColor: "rgba(255,255,255,0.5)",
fontStyle: "bold"
}
}]
}
}
});
setTimeout(function() {
addData(myChart, [45, 50, 30, 34, 61, 53, 42], 0);
}, 2000);
function addData(chart, data, datasetIndex) {
chart.data.datasets[datasetIndex].data = data;
chart.update();
}* { background: #111 }<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="chart" width="350" height="200"></canvas>