Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

使用chart.facet时,调用changeData更新数据后,重新render图表,内存泄漏问题 #3333

Closed
Diazhao opened this issue Mar 19, 2021 · 4 comments

Comments

@Diazhao
Copy link

Diazhao commented Mar 19, 2021

【bug】重现步骤

  1. 创建分面图表chart.facet(...)
  2. 更新数据chart.changeData(...) 此时无法正常更新,见issue
  3. 之后再调用chart.render()分面可以正常更新
  4. 重复2,3步骤多次,内存泄漏

重现代码, 由g2的官方example改版

import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/fertility.json')
  .then(res => res.json())
  .then(data => {
    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.transform({
      type: 'sort',
      callback(a, b) {
        return a.year - b.year;
      }
    });
    const chart = new Chart({
      container: 'container',
      autoFit: true,
      height: 500,
      padding: [50, 20, 50, 50]
    });
    chart.data(dv.rows);

    chart.scale({
      value: {
        max: 9,
        min: 1
      },
      year: {
        range: [0, 1],
        ticks: ['1950', '2015']
      }
    });

    chart.axis('year', {
      grid: {
        line: {
          style: {
            lineDash: [0, 0],
            lineWidth: 1,
            stroke: '#e9e9e9'
          }
        }
      },
      label: {
        rotate: Math.PI / 4,
      }
    });

    chart.tooltip({
      showCrosshairs: true
    });

    chart.facet('rect', {
      fields: ['country'],
      columnTitle: {
        style: {
          fontSize: 12,
          textAlign: 'center',
          fontWeight: 300,
          fill: '#8d8d8d'
        }
      },
      padding: 8,
      eachView: (view, facet) => {
        view.line()
          .position('year*value')
          .shape('smooth')
          .style({ opacity: 0.8 });
      },
    });
    chart.render();

    setInterval(() => {
      chart.clear()
      chart.changeData(dv.rows)
      chart.render()
    }, 2000)
  });

内存使用情况如下图所示:
image

@hustcc
Copy link
Member

hustcc commented Mar 25, 2021

@Diazhao 有兴趣帮忙调试一下,具体是什么地方导致的内存泄露吗?

@Fucntion
Copy link

蹲一个。

@SiBorea
Copy link

SiBorea commented Mar 12, 2023

同样的问题,还没修复

@pearmini
Copy link
Member

pearmini commented Dec 5, 2023

4.0 的这个问题不会修复了,可以试试 5.0 的分面:

image
import { Chart } from '@antv/g2';

const chart = new Chart({
  container:'container',

});

chart.options({
  type: 'facetRect',
  width: 1000,
  paddingBottom: 50,
  data: {
    type:'fetch',
    value:
      'https://gw.alipayobjects.com/os/antvdemo/assets/data/fertility.json',
  },
  encode: { x: 'country' },
  children: [
    {
      type: 'line',
      encode: {
        x: 'year',
        y: 'value',
        shape: 'smooth',
      },
      style: { opacity: 0.8, },
    },
  ],
});

chart.render()

@pearmini pearmini closed this as completed Dec 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants