antvis/G2

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

Diazhao posted onGitHub

【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


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

<img width="1038" alt="image" src="https://github.com/antvis/G2/assets/49330279/eee68e7f-ce78-4177-9e76-b53d4fc3f200">

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()
posted by pearmini over 1 year ago

Fund this Issue

$0.00
Funded

Pull requests