解决chart.js重复绘图问题

使用antv g2绘制chart，页面上进行axios操作之后数据改变，新数据在页面上会重新绘图，但之前的图表依然存在，现在解决的是在绘制新图之前销毁原来的图表。

画完图表之后，将chart存一下，改变数据再次进来的时候，判断一下有没有chart，有的话就销毁

第一种

• chart.destroy() ----这种方式在某些情况下destroy会报错，可以采用下面的方法。
  desyroy：销毁图表，删除生成的图表对象。
  clear：清空图表上所有的绘制内容，但是不销毁图表。

let chartCurrent=null//图表初始值为null
paintChart=()=>{
chartCurrent&&chartCurrent.destroy()//chartCurrent存在就销毁重新绘制chart
let chart = new G2.Chart({
      container: 'circle',
      autoFit: true,
      height: 600,
      padding:'auto'
    });
}
chart.source(data);
chart.interval().position('date*expected');
chart.render();
chartCurrent=chart   

<div id='circle'><div>

第二种

• js获取canvas节点，每次绘图之前都先删除canvas节点。还有说删除后再重新添加一下$('#circle').append('')，我这边实验了一下，重新绘制的时候，会自动添加。

let chartCurrent=null//图表初始值为null
paintChart=()=>{
chartCurrent&&$('#circle').find('canvas').remove();
let chart = new G2.Chart({})}
chart.source(data);
chart.interval().position('date*expected');
chart.render();
chartCurrent=chart   

<div id='circle'><div>