首页 > 其他分享 >antd G6中建立图表时,让赋值速度慢于建图速度的一个解决方法

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

时间:2023-10-21 22:34:23浏览次数:30  
标签:G6 container 异步 chart 图表 建图 antd data 加载

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

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

相关文章

  • uniCloud cms 自媒体资讯新闻文章应用系统 uniapp+uniCloud+AntDesignVue Life cms
    介绍LifeCMS是uniCloud+uni-app云端一体全套CMS/自媒体/资讯/新闻/文章应用系统,前台包含注册、登录(账号密码登录、短信登录、微信手机号快捷登录、微信一键登录、App手机一键登录、Apple登录)、文章列表、文章详情、搜索、广告、分享、评论、回复、点赞、收藏、用户中心、意见......
  • P6378 [PA2010] Riddle-2sat优化建图
    P6378[PA2010]Riddle-2sat优化建图\(n\)个点\(m\)条边的无向图被分成\(k\)个部分。每个部分包含一些点。请选择一些关键点,使得每个部分恰有一个关键点,且每条边至少有一个端点是关键点。\(1\leqn,m\leq10^6\)边的限制用\(n\)个变量\(x_1\dotsx_n\),其中\(x_i\)......
  • 在react项目中结合antd实现表格tooltip提示
    react项目antdesign给表格title添加tooltip提示效果,效果如下: title:()=>(    <span>     {'原表'}&nbsp;     <Tooltip       title={'如有颜色标注则表示id在该表无数据'}     >      <InfoCircleOutlined......
  • antd for vue3 table 使用rowClassName设置样式固定列不生效
    依赖库版本:Vue3+antdforvuev3.X样式问题:固定列背景色不生效,鼠标移入对应行背景色变为初始的白色columns:[{title:'装置',width:100,dataIndex:'areaName',fixed:'left'},...{title:'装置',w......
  • spring6-事务
    1、JdbcTemplate1.1、简介Spring框架对JDBC进行封装,使用JdbcTemplate方便实现对数据库操作1.2、准备工作①搭建子模块搭建子模块:spring-jdbc-tx②加入依赖<dependencies><!--springjdbcSpring持久化层支持jar包--><dependency><groupId>org.springfram......
  • antd Input 只能输入大于零的正整数
    onChange={(value:any)=>{letval=Number(value);if(val<1){value='';setDeviceNumber('');}else{setDeviceNumber(Number(value.replace(/[^\d]/g,'')));}}}......
  • 【AntDesign】多环境配置和启动
    环境分类,可以分为本地环境、测试环境、生产环境等,通过对不同环境配置内容,来实现对不同环境做不同的事情。AntDesign项目,通过config.xxx.ts添加不同的后缀来区分配置文件,启动时候通过后缀启动即可。config.ts:公共配置config.xxx.ts:不同环境的差异配置1查看当前环境......
  • 2023-10-06 Warning: [antd: Switch] `value` is not a valid prop, do you mean `che
    该报错意思是你用的这个switch组件对应的属性应该是checked而不是value,后者应该是antd默认设置的属性,可以通过valuePropName来手动指定对应的属性值。如:<FormItemname="status"label="状态"valuePropName="checked"rules={[{required:true}]}><Switch/></FormIte......
  • 线段树优化建图
    一个很好用的\(trick\)。我们通过例题CF786B为例。他需要我们支持点之间连边,点和区间之间连边,区间和点之间连边。支持最短路。如果我们暴力连边,显然最多是有\(n^2\)条边的。那怎么办呢,引入线段树分治。线段树分治在某些题中,我们可能会用\(v\tou\in[l,r]\)这种一个......
  • Aveva Marine VBNET 编程系列-新建图纸,创建文字
    根据MarApi,创建图形文件,新建文字ImportsAveva.ApplicationFramework.PresentationImportsAveva.Marine.Drafting'marAPI.dllPublicClass绘图控制<MyAmFunctionAtt(NameOf(绘图控制),NameOf(新建图纸))>PublicSub新建图纸(wmAsWindowManager)Di......