chart.js加载全新的数据
chart.js的API允许编辑加载到其中的数据集的点，例如：
.update( )在您的Chart实例上调用update（）将使用任何更新的值重新渲染图表，从而允许您编辑多个现有点的值，然后在一个animation渲染循环中渲染这些值。
.addData( valuesArray, label )在您的Chart实例上调用addData（valuesArray，label），为每个数据集传递值的数组以及这些点的标签。
.removeData( )调用Chart实例上的removeData（）将删除图表上所有数据集的第一个值。
所有这些都很好，但我不知道如何加载一个全新的数据集，消除旧的。 文档似乎没有涵盖这一点。
我有这个巨大的问题
首先我尝试.clear()然后我尝试.destroy() ，我试图设置我的图表引用为空
什么最终解决了我的问题：删除<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);
使用Chart.js V2.0，您可以执行以下操作：
websiteChart.config.data = some_new_data; websiteChart.update();
我的解决scheme很简单。 （VERSION 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是一个函数来控制我需要呈现的数据集
我在这里回答了这个问题，请参阅如何清除canvas中的图表，以便hover事件不能被触发？
但是这里是解决scheme：
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}); }
这是一个旧线程，但在当前版本（截至2017年1月2日），很容易replacechart.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();
根据文档， clear()清除canvas。 把它想象成Paint中的橡皮擦工具。 它与当前在图表实例中加载的数据无关。
破坏实例并创build新实例是浪费的。 相反，使用API方法removeData()和addData() 。 这些将在图表实例中添加/删除单个分段。 所以，如果你想加载全新的数据，只需循环一个图表数据数组，并调用removeData(index) （数组索引应该对应于当前的段索引）。 然后，使用addData(index)填充新的数据。 我build议用循环数据的方式来包装这两种方法，因为他们期望有一个单独的段索引。 我使用resetChart和updateChart 。 在继续之前，请确保您查看Chart.js最新版本和文档。 他们可能已经添加了新的方法来完全replace数据 。
我遇到了同样的问题，我有6个饼图在一个页面上，可以同时更新。 我正在使用以下function来重置图表数据。
// 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();
你需要清理旧的数据。 不需要重新初始化：
for (i in myChartLine.datasets[0].points) myChartLine.removeData();
我尝试neaumusic解决scheme，但后来发现， 唯一的问题是销毁的范围 。
var chart; function renderGraph() { // Destroy old graph if (chart) { chart.destroy(); } // Render chart chart = new Chart( document.getElementById(idChartMainWrapperCanvas), chartOptions ); }
把我的图表variables移到函数作用域之外，让它为我工作。
如果有人正在寻找如何在React中做到这一点。 对于折线图，假设您在图表周围有一个包装组件：
（这里假定你使用的是v2，你不需要使用react-chartjs ，这是使用npm的普通chart.js包）。
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> ); }
componentDidUpdatefunction允许您更新，添加或删除this.props.data中的任何数据。
上面的答案都没有用最less的代码以非常干净的方式帮助我的特定情况。 我需要删除所有数据集，然后循环dynamic添加几个数据集。 所以这被剪掉是为那些一直到页面的底部，没有find他们的答案:)
注意：一旦将所有新数据加载到数据集对象中，请务必调用chart.update（）。 希望这有助于某人
function removeData(chart) { chart.data.datasets.length = 0; } function addData(chart, data) { chart.data.datasets.push(data); }
ChartJS 2.6支持数据引用replace（请参阅update（config）文档中的注释 ）。 所以当你有你的图表时，基本上可以这样做：
myChart.data.labels = ['1am', '2am', '3am', '4am']; myChart.data.datasets[0].data = [0, 12, 35, 36]; myChart.update();
它不会执行从添加点获得的animation，但图上的现有点将被animation化。
目前我唯一可以find的解决scheme是重新初始化图表：
var myLineChart = new Chart(ctx).Line(data, options);
不过这对我来说似乎有些尴尬。 更好，更标准的解决scheme？
我也有很多麻烦。 我有单独的数组中的数据和标签，然后重新初始化图表数据。 我添加了line.destroy（）; 正如上面提到的那样，这已经成功了
var ctx = document.getElementById("canvas").getContext("2d"); if(window.myLine){ window.myLine.destroy(); } window.myLine = new Chart(ctx).Line(lineChartData, { etc etc
有一种方法可以在不清除canvas或重新开始的情况下执行此操作，但是必须先处理图表的创build，以便在更新时数据的格式相同。
这是我如何做到的。
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; }
我基本上删除创build时加载的数据，然后用添加数据方法进行改造。 这意味着我可以访问所有的点。 每当我试图访问由以下内容创build的数据结构：
Chart(ctx).Bar(dataNew);
命令，我不能访问我所需要的。 这意味着你可以像创build它们一样改变所有的数据点，也可以调用update（）而不用从头开始完全animation。
