Question

chart.js 重复绘图问题

现在页面上有一个canvas，在这个canvas上使用chart.js绘图，页面上进行一些ajx操作之后数据改变，使用新数据在canvas上重新绘图，但之前的图表依然存在，结果就是鼠标在图表上移动的时候，2张图表之间会来回闪动。请问在绘制新图之前如何清除之前的图表？试了clearRect没有效果

Answer 1

myLineChart.destroy();
能解决一部分问题，更完美的解决方法我还在研究中，同求大神指点
更好的解决方法如下：
每次绘图之前先删除canvas节点，重新添加一个。
$('#lineChart').remove(); // this is my <canvas> element
$('#lineChartParent').append('<canvas id="lineChart" height="230"></canvas>');

Answer 2

http://www.chartjs.org/docs/latest/developers/updates.html

官方文档提供了完美的解决方案，根据你的需要进行处理，以上为更新连接，建议自己去看，以下为简单的分析：

你可以直接修改你创建的chart的数据，使用update提交即可。

以官网的截图为例：

创建的代码是：

var myLineChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});

其中data和options的结构不再详细叙述，如果还没有学会创建，就别说更新。

创建好chart后，你可以直接对chart的属性进行设置，比如我要添加Aug这个点，把值设置为45。

那么你可以非常简单粗暴地重新构建一个data，然后直接赋值更新：

myLineChart.data=new_data;
myLineChart.update();

你也可以修改现有的data中的东西：

//这里你需要对data结构了解
myLineChart.data.labels.push("Aug");//labels为一数组，怎么操作数组不需要多说
myLineChart.data.datasets[0].data.push(45);//了解data结构
myLineChart.update();

值得一说的是，注意新老版本文档是有区别的，建议直接去官网下载最新版本的js