通过异步加载的方式将数据加载和图表建立过程分离,一个简单的例子:
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()方法进行图表的渲染。
通过异步加载数据,可以先快速加载页面并显示数据,然后在后台进行图表的建立和渲染,从而提高用户体验和页面响应速度。
标签:G6,container,异步,chart,图表,建图,antd,data,加载 From: https://www.cnblogs.com/hyxxl/p/17779674.html