解决chart.js重复绘图问题

最新推荐文章于 2023-03-21 13:57:59 发布

小五Ivy

最新推荐文章于 2023-03-21 13:57:59 发布

阅读量3.6k

点赞数 3

文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_44471622/article/details/105221258

版权

chart 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了在使用AntV G2绘制图表时，如何有效更新和销毁图表以避免页面上出现重复的图表元素。介绍了两种方法：一是利用chart.destroy()销毁并重新绘制图表；二是通过JS获取canvas节点，在每次绘图前删除旧的canvas节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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('<canvas></canvas>')，我这边实验了一下，重新绘制的时候，会自动添加。

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>