该APIchart.js允许您编辑加载到其中的数据集的点，例如：
.update( )在Chart实例上调用update（）将使用任何更新的值重新渲染图表，从而允许您编辑多个现有点的值，然后在一个动画渲染循环中渲染这些点。
.addData( valuesArray, label )在Chart实例上调用addData（valuesArray，label），以传递每个数据集的值数组以及这些点的标签。
.removeData( )在Chart实例上调用removeData（）将删除图表上所有数据集的第一个值。
所有这些都很棒，但是我无法弄清楚如何加载一个全新的数据集，从而清除掉旧数据集。该文档似乎没有涵盖此内容。
Answers:
我对此有很大的问题
首先我尝试了.clear()然后尝试了，.destroy()并且尝试将图表引用设置为null
最终为我解决了这个问题：删除<canvas>元素，然后将新元素重新添加<canvas>到父容器
有百万种方法可以做到这一点：
var resetCanvas = function () {
$('#results-graph').remove(); // this is my <canvas> element
$('#graph-container').append('<canvas id="results-graph"><canvas>');
canvas = document.querySelector('#results-graph'); // why use jQuery?
ctx = canvas.getContext('2d');
ctx.canvas.width = $('#graph').width(); // resize to parent width
ctx.canvas.height = $('#graph').height(); // resize to parent height
var x = canvas.width/2;
var y = canvas.height/2;
ctx.font = '10pt Verdana';
ctx.textAlign = 'center';
ctx.fillText('This text is centered on the canvas', x, y);
};
您需要销毁：
myLineChart.destroy();
然后重新初始化图表：
var ctx = document.getElementById("myChartLine").getContext("2d");
myLineChart = new Chart(ctx).Line(data, options);
它是一个旧线程，但是在当前版本（截至2017年2月1日）中，它很容易替换在chart.js上绘制的数据集：
假设新的x轴值位于数组x中，而y轴值位于数组y中，则可以使用以下代码更新图表。
var x = [1,2,3];
var y = [1,1,1];
chart.data.datasets[0].data = y;
chart.data.labels = x;
chart.update();
我对此的解决方案非常简单。（版本1.X）
getDataSet:function(valuesArr1,valuesArr2){
var dataset = [];
var arr1 = {
label: " (myvalues1)",
fillColor: "rgba(0, 138, 212,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(0, 138, 212,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: valuesArr1
};
var arr2 = {
label: " (myvalues2)",
fillColor: "rgba(255, 174, 087,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(255, 174, 087,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: valuesArr2
};
/*Example conditions*/
if(condition 1)
dataset.push(arr1);
}
if(condition 2){
dataset.push(arr1);
dataset.push(arr2);
}
return dataset;
}
var data = {
labels: mylabelone,
datasets: getDataSet()
};
if(myBarChart != null) // i initialize myBarChart var with null
myBarChart.destroy(); // if not null call destroy
myBarChart = new Chart(ctxmini).Bar(data, options);//render it again ...
没有闪烁或问题。getDataSet是控制我需要呈现的数据集的功能
我在这里回答了这个问题，请参阅如何从画布上清除图表以使悬停事件无法触发？
但是这里是解决方案：
var myPieChart=null;
function drawChart(objChart,data){
if(myPieChart!=null){
myPieChart.destroy();
}
// Get the context of the canvas element we want to select
var ctx = objChart.getContext("2d");
myPieChart = new Chart(ctx).Pie(data, {animateScale: true});
}
根据文档，clear()清除画布。可以将其视为Paint中的橡皮擦工具。它与图表实例中当前加载的数据无关。
销毁实例并创建一个新实例是浪费的。相反，请使用API方法removeData()和addData()。这些将向/从图表实例添加/删除单个细分。因此，如果要加载全新的数据，只需循环一个图表数据数组，然后调用removeData(index)（数组索引应对应于当前段索引）。然后，使用addData(index)填充新数据。我建议包装两种用于循环数据的方法，因为它们期望单个段索引。我使用resetChart和updateChart。在继续之前，请确保您检查了Chart.js最新版本和文档。他们可能添加了新方法来完全替换数据。
我遇到了同样的问题，我在页面上有6个饼图，可以同时更新它们。我正在使用以下功能来重置图表数据。
// sets chart segment data for previously rendered charts
function _resetChartData(chart, new_segments) {
// remove all the segments
while (chart.segments.length) {
chart.removeData();
};
// add the new data fresh
new_segments.forEach (function (segment, index) {
chart.addData(segment, index);
});
};
// when I want to reset my data I call
_resetChartData(some_chart, new_data_segments);
some_chart.update();我尝试了神经音乐方法，但是后来发现，destroy唯一的问题是范围。
var chart;
function renderGraph() {
// Destroy old graph
if (chart) {
chart.destroy();
}
// Render chart
chart = new Chart(
document.getElementById(idChartMainWrapperCanvas),
chartOptions
);
}
将我的图表变量移到函数范围之外，就可以使用它。
如果有人正在寻找如何在React中做到这一点。对于折线图，假设您在图表周围有一个包装器组件：
（这假设您使用的是v2。不需要使用react-chartjs。这是使用chart.jsnpm中的常规软件包。）
propTypes: {
data: React.PropTypes.shape({
datasets: React.PropTypes.arrayOf(
React.PropTypes.shape({
})
),
labels: React.PropTypes.array.isRequired
}).isRequired
},
componentDidMount () {
let chartCanvas = this.refs.chart;
let myChart = new Chart(chartCanvas, {
type: 'line',
data: this.props.data,
options: {
...
}
});
this.setState({chart: myChart});
},
componentDidUpdate () {
let chart = this.state.chart;
let data = this.props.data;
data.datasets.forEach((dataset, i) => chart.data.datasets[i].data = dataset.data);
chart.data.labels = data.labels;
chart.update();
},
render () {
return (
<canvas ref={'chart'} height={'400'} width={'600'}></canvas>
);
}
该componentDidUpdate功能使您可以更新，添加或删除中的任何数据this.props.data。
不是必须销毁图表。试试这个
function removeData(chart) {
let total = chart.data.labels.length;
while (total >= 0) {
chart.data.labels.pop();
chart.data.datasets[0].data.pop();
total--;
}
chart.update();
}
请了解Chart.js（此处为版本2）的工作原理，并针对所需的任何属性进行操作：
<canvas id="your-chart-id" height="your-height" width="your-width"></canvas>
2.请假设您有一个第一次填充图表的javascript代码（例如，加载页面时）：
var ctx = document.getElementById('your-chart-id').getContext('2d');
var chartInstance = new Chart(ctx, {
type: 'bar',
data: {
labels: your-lables-array,
datasets: [{
data: your-data-array,
/*you can create random colors dynamically by ColorHash library [https://github.com/zenozeng/color-hash]*/
backgroundColor: your-lables-array.map(function (item) {
return colorHash.hex(item);
})
}]
},
options: {
maintainAspectRatio: false,
scales: {
yAxes: [ { ticks: {beginAtZero: true} } ]
},
title: {display: true, fontSize: 16, text: 'chart title'},
legend: {display: false}
}
});
请假设您想完全更新您的数据集。这很简单。请查看上面的代码，看看从图表变量到数据的路径如何，然后遵循以下路径：
chartInstance变种data node里面的chartInstance。datasets node里面的data node。datasets node是一个数组。因此您必须指定所需的该数组的元素。这里我们在datasets node。中只有一个元素，因此我们使用datasets[0]datasets[0]data node在中选择内部datasets[0]。
通过这些步骤chartInstance.data.datasets[0].data，您可以设置新数据并更新图表：
chartInstance.data.datasets[0].data = NEW-your-data-array
//finally update chart var:
chartInstance.update();
到目前为止，我自己找不到的唯一解决方案是从头开始重新初始化图表：
var myLineChart = new Chart(ctx).Line(data, options);
但是，这对我来说似乎有点骗人。还有更好，更标准的解决方案吗？
这里是一个办法做到这一点不清除帆布或重新开始，但你要的男人把手图表的制作功能，使数据在当你更新相同的格式。
这是我的方法。
var ctx = document.getElementById("myChart").getContext("2d");
if (chartExists) {
for (i=0;i<10;i++){
myNewChart.scale.xLabels[i]=dbLabels[i];
myNewChart.datasets[0].bars[i].value=dbOnAir[i];
}
myNewChart.update();
}else{
console.log('chart doesnt exist');
myNewChart = new Chart(ctx).Bar(dataNew);
myNewChart.removeData();
for (i=0;i<10;i++){
myNewChart.addData([10],dbLabels[i]);
}
for (i=0;i<10;i++){
myNewChart.datasets[0].bars[i].value=dbOnAir[i];
}
myNewChart.update();
chartExists=true;
}
我基本上会废弃创建时加载的数据，然后使用add data方法进行重整。这意味着我可以访问所有要点。每当我尝试访问由以下对象创建的数据结构时：
Chart(ctx).Bar(dataNew);
命令，我无法访问所需的内容。这意味着您可以按照创建它们的相同方式更改所有数据点，并且还可以调用update（）而不完全从头开始进行动画处理。
图表JS 2.0
只需设置chart.data.labels = [];
例如：
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.update();
}
$chart.data.labels = [];
$.each(res.grouped, function(i,o) {
addData($chart, o.age, o.count);
});
$chart.update();