![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
chart
文章平均质量分 92
antv g2来绘制chart图表,主要是结合react使用
小五Ivy
这个作者很懒,什么都没留下…
展开
-
在react中使用antv g2绘制带有sider滑块的chart图表
在slider中会遇到的问题,slider两边要求展示的为文字,但过滤的时候过滤条件为下标,实现思路如下:过滤的时候判断条件是数值类型即下标,但为了在滑块两端展示文字,需要将’start’,'end’那边改成对应的起始终止文字,但又会出现新的问题,就是在onChange里面打印的startText和endText也为相应的文字而不是下标,考虑着在变化的时候需要将变化的下标赋值给ds里面的from和to,不然chart图表不再展示,就需要进行遍历判断一下,找到文字下对应的下标,然后赋值给from和to原创 2020-05-25 13:48:18 · 1967 阅读 · 0 评论 -
antvg2中的Slider 滑块插件的简介
1. 使用前提:Slider 组件作为 G2 的交互插件,必须在 G2 引入的前提下使用!为了做到纯粹和解耦,Slider 组件是完全基于数据的筛选操作,需要配合 DataSet 以及状态量使用,当滑动条发生变化时,通过定义 onChange 更新状态量,来达到图表的自动更新。引入脚本import G2 from '@antv/g2';import Slider from '@antv/g2-plugin-slider';const slider = new Slider({ })原创 2020-05-21 10:53:51 · 3243 阅读 · 1 评论 -
antv g2绘制雷达图,点击横坐标的label变色
需求介绍:绘制雷达图点击label改变样式解决思路:首先考虑着使用g2自带的label来进行展示,虽然通过chart.on('axis-label:click',ev=>{})可以拿到当前点击的哪一个,但是label内部没有回调函数,无法进行判断来展示不同的颜色。然后再考虑使用辅助文本chart.guide().text({}) 来展示label,label展示出来了,但位置是根据数据变化的,所以位置不好控制,在辅助文本的点击事件里面重新绘图,辅助文本的点击事件chart.on('gu原创 2020-05-19 18:37:36 · 4190 阅读 · 0 评论 -
g2绘制点图,鼠标移入点上出现tooltip,对应的label消失
g2绘制点图,实现鼠标移入点上,tooltip展示,对应的label消失,鼠标移出之后,tooltip消失,对应的label展示出来。思路:给point注册鼠标移入事件,可以拿到当前移入的元素的数据,通过数组的findIndex方法,可以找到与当前移入元素的下标。label的格式是自定义的,用原生js可以获取所有的label数组,label的个数和总数据的个数是一一对应的,所以可以根据...原创 2020-04-27 11:00:12 · 2045 阅读 · 2 评论 -
g2文档整理
1. 渐变色G2 中提供了线性渐变、放射状 / 环形渐变两种形式,使用方式如下:线性渐变// 使用渐变色描边,渐变角度为 0,渐变的起始点颜色 #ffffff,中点的渐变色为 #7ec2f3,结束的渐变色为 #1890ffstroke: 'l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff';放射状 / 环形渐变// 使用渐变色填充,渐变起始圆的圆心坐标...原创 2020-04-10 15:38:43 · 915 阅读 · 0 评论 -
设置g2中tooltip 的辅助框样式
tooltip原创 2020-04-09 16:44:00 · 1692 阅读 · 0 评论 -
g2自定义chart的label+将获取到的数据转换成chart表需要的数据
chart的label分为两种,一种是坐标轴的label,一种是chart图(条形图,折线图等)上展示的label。import { G2 } from "g2"const data=[{city:'北京',val:2111,type:'供应面积'},{city:'上海',val:1311,type:'供应面积'},{city:'南京',val:1241,type:'供应面积'},...原创 2020-04-02 15:31:10 · 1877 阅读 · 0 评论 -
解决使用g2绘制图表,数据全为null时页面展示不为空的情况
G2数据全部为null时,页面显示优化如果数据全部为null 会出现下列这种情况 如果出现可以这样优化this.state.view.source(data,{ area:{type:'linear'}})原创 2020-03-31 15:59:32 · 2091 阅读 · 0 评论 -
解决chart.js重复绘图问题
使用antv g2绘制chart,页面上进行axios操作之后数据改变,新数据在页面上会重新绘图,但之前的图表依然存在,现在解决的是在绘制新图之前清除之前的图表。第一种chart.destroy() ----这种方式在某些情况下destroy会报错,可以采用下面的方法。desyroy:销毁图表,删除生成的图表对象。clear:清空图表上所有的绘制内容,但是不销毁图表。let ch...原创 2020-03-31 14:15:49 · 3323 阅读 · 0 评论 -
antv g2设置chart图例的legend为一条线与一个圆的组合
示例/* * @Description: 【商办】土地年度平均地价及溢价率 * @Author: wanghuilan885 * @Date: 2019-11-19 18:44:04 * @LastEditTime: 2020-02-19 16:40:48 * @LastEditors: Please set LastEditors */import React from 'rea...原创 2020-03-30 14:54:52 · 7305 阅读 · 4 评论 -
antv g2 绘制chart图表在纵轴坐标顶部加上单位
/** * 辅助文本 - position 属性基本用法 * 【传送门:https://www.yuque.com/antv/g2-docs/api-chart#bf82034b】 * position 属性取值:{object} | {function} | {array} * array: 数组来配置位置 [ x, y ],以下只是数组中值存在的一种形式...原创 2020-03-30 10:22:57 · 7189 阅读 · 2 评论