antv g2图形二次渲染问题

最新推荐文章于 2024-05-18 11:09:56 发布
最新推荐文章于 2024-05-18 11:09:56 发布
阅读量3k 收藏 3
点赞数 2
分类专栏： vue3学习 前端学习笔记 文章标签： 前端 数据可视化 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/july_29/article/details/122217633
版权

在使用antv的g2对进行可视化时，通过改变时间来对图形进行再次渲染，遇到过很多次问题，主要解决办法为：
1.我们得先得把图形画出来，才能执行重新渲染的方法

initChart()

2.获取到新数据后，需要对数据进行更新，然后通过changeChart（）方法来重新画图。

changeChart(){
 this.chart.changeData(this.inlandData)
}

方法里面的data是新数据

戴竹蜻蜓穿过森林_
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
antv g2、g6 自定义扩展
04-30
g2自定义 3d柱状图、分割柱状图及g6 自定义卡片
G2plot图表在Vue中使用-获取新数据后二次渲染图表-案例
JackieDYH的博客
06-27 2184
Vue组件方式 组件 使用
antv g2图表重新渲染
wangheng0221的博客
09-27 4512
antv g2官方网站提供的方法changeData 具体步骤： 1.按需引入使用的图表：import { Bar } from '@antv/g2plot' 2.定义包裹容器<div id="echart"></div> 3.声明挂载对象chartChange 4.定义数据（调用接口的地方声明）this.chartChange= new Bar('echart', { autoFit: true, padding: [0, 40, 0
antv图形二次渲染刷新问题
july_29的博客
01-11 4153
在进行antv数据可视化时，遇到了一些问题，比如画好图之后，改变一些参数，重新获取数据，重新渲染的方法在之前的博客上写了，可以使用changChart方法。 在获取完新数据之后，什么时候再一次进行渲染，如果直接写在获取数据的方法后面，可能数据还没有加载出来，就已经执行changChart()方法了，这让我们的图形就没有渲染成功。 解决方法1 第一次我想到的是使用定时器，可以在执行完获取数据的方法后，加上一个定时器，延迟1500或者2000，可以解决这个问题。 解决方法2 方法一虽然可以解决掉这个问题，但是在
G2自定义图例，数据更新时渲染问题。
qq_38743783的博客
02-03 2212
这是问题解决后的样式，顶部还有一个筛选条件，筛选之后 图片数据更新。第一次会通过 new Chart 获得图表对象，第二次触发的改变的时候 是用对象调用changeData放法来改变。 但是这里自定义了图例，就报错了。平常的图例没有 冒号和后面的数量 百分比。 // data是获取的数据 this.terminal.legend({ position: 'right', flipPage: false, itemName: { for.
antvg2中的Slider 滑块插件的简介
weixin_44471622的博客
05-21 3160
1. 使用前提： Slider 组件作为 G2 的交互插件，必须在 G2 引入的前提下使用！ 为了做到纯粹和解耦，Slider 组件是完全基于数据的筛选操作，需要配合 DataSet 以及状态量使用，当滑动条发生变化时，通过定义 onChange 更新状态量，来达到图表的自动更新。 引入脚本 import G2 from '@antv/g2'; import Slider from '@antv/g2-plugin-slider'; const slider = new Slider({ })
ANTV G2 3.2 使用教程.pdf
09-05
ANTV G2 3.2 使用教程
快速上手AntV G2Plot
01-08
快速上手AntV G2Plot 小白一枚，引入官方示例各种报错，发现Line对象在G2Plot对象里面！ 将const linePlot = new Line()…改为const linePlot = new G2Plot.Line后正常， 标题复制下面代码可直接出效果 /...
在vue项目中引用Antv G2,以饼图为例讲解
01-18
npm install @antv/g2 –save template内容： <div id=pieChart></div> js部分： ​//引入G2组件 import G2 from @antv/g2; ​ export default { name:, //数据部分 data(){ return{ sourceData: [],//...
antv-g2.chm
07-25
angular antv-g2官网的帮助文档本地缓存做成的离线文档，可以在不联网的状态下查看帮助手册，方便内网的同事们做参考手册，基于g2-3.0版本
在react中使用antv g2绘制带有sider滑块的chart图表
weixin_44471622的博客
05-25 1942
在slider中会遇到的问题，slider两边要求展示的为文字，但过滤的时候过滤条件为下标，实现思路如下： 过滤的时候判断条件是数值类型即下标，但为了在滑块两端展示文字，需要将’start’,'end’那边改成对应的起始终止文字，但又会出现新的问题，就是在onChange里面打印的startText和endText也为相应的文字而不是下标，考虑着在变化的时候需要将变化的下标赋值给ds里面的from和to,不然chart图表不再展示，就需要进行遍历判断一下，找到文字下对应的下标，然后赋值给from和to
vue：ant-g2渲染图表时出现累增（追加）
好幸运
09-06 507
问题： 问题标签代码： <div id="divId"></div> 解决方法： 方法一、使用js原生方法，直接清空div标签的内容 document.getElementById('divId').innerHTML = '' ; 方法二：我还没想出来
关于jqplot同一个div重用,导致数据重复问题
horizon47的专栏
12-22 668
这是我的jsp: function show(){plot2 = $.jqplot('chart1b', [s1, s2], { series: [ {label: '总计'}, {label: '已完成'} ], seriesDefaults:{ rendererOptions:{barPadding:
移动端可视化框架antv f2出现两个legend选项
angyangan9569的博客
05-14 677
前天遇到个坑，把我给坑死了 ，在帮朋友做一个微信公众号的项目，使用的vue全家桶，有个模块需要用到数据可视化展现，之前做项目的时候用过antv，比较熟悉，因为是移动端的项目，所以用的是antv f2这个可视化框架，按照之前写的方式都做完之后，最后发现下面出现了两个相同的legend，找了半天也没发现问题出在哪，百思不得其解 watch:{ statisticsList: { 　...
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 670
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1109
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
s_sos0的博客
05-14 508
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器
最新发布
shijialeya
05-18 382
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器进行数据格式化。
综合性练习-验证码
cj13106811623的博客
05-15 822
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
vue2使用ANTV G2
01-24
在Vue2中使用AntV G2，你可以按照以下步骤进行操作： 1. 安装AntV G2依赖： ```shell npm install @antv/g2 ``` 2. 在Vue组件中引入G2： ```javascript import G2 from '@antv/g2'; ``` 3. 在Vue组件的`mounted`生命周期钩子中创建G2图表： ```javascript mounted() { const chart = new G2.Chart({ container: 'chart-container', // 图表容器的id width: 600, // 图表宽度 height: 400, // 图表高度 // 其他配置项 }); // 绘制图表 chart.render(); } ``` 4. 在Vue组件的模板中添加图表容器： ```html <template> <div id="chart-container"></div> </template> ``` 这样就可以在Vue2中使用AntV G2进行数据可视化了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值