antd G6中建立图表时,让赋值速度慢于建图速度的一个解决方法

发布时间 2023-10-21 22:27:27作者: 谎言西西里

通过异步加载的方式将数据加载和图表建立过程分离,一个简单的例子:

import { Chart } from '@antv/g6'

//  创建一个空的图表容器
const container = document.getElementById('chart-container');
const chart = new Chart({
    container,
    // 其他配置项...
});

// 异步加载数据
fetch('https://example.com/data')
       .then(response => response.json())
       .then(data => {
             // 数据加载完成后,开始建立图表
            chart.data(data);
            chart.render();
       })
       .catch( error =>{
            console.error('数据加载失败',error);  
       });       

在上面的代码中,首先创建了一个空的图表容器chart-container,然后通过异步请求从https://example.com/data获取数据,在数据加载完成后,使用chart.data(data)方法将数据赋值给图表,然后调用chart.render()方法进行图表的渲染。

通过异步加载数据,可以先快速加载页面并显示数据,然后在后台进行图表的建立和渲染,从而提高用户体验和页面响应速度。