ChartJs在创建多个图表,并且图表在同一个位置的时候,会发生重影的问题,有两种解决办法
html部分
<div id='canvas_parent'>
<canvas id='chart'></canvas>
</div>
第一种:在每次创建图表的时候去掉旧的图表
var pre_chart = null;
if (count > 0) {
delete(Chart.instances[count-1]);
$('#canvas_parent').children().remove();
$('#canvas_parent').append("<canvas id='chart'></canvas>");
}
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
......
},
});
第二种:不创建新的图表,更新图表中的数据
if (Chart.instances[0] != null)
pre_chart = Chart.instances[0].chart;
if (pre_chart == null) {
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
......
},
});
} else {
pre_chart['data']['datasets'][0]['data'] = newData;
pre_chart.update();
}