ant-design-charts：绘图属性和通用配置

已于 2023-05-05 17:42:13 修改
阅读量2.6k 收藏
点赞数
分类专栏： 深入浅出react 文章标签： 信息可视化
于 2023-05-05 15:11:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuelian3015/article/details/130143102
版权
ant-design-charts是基于G2Plot的React图表库，适用于以ant-design为UI框架的数据可视化项目。本文详细介绍了绘图属性，如图形样式和线样式配置，以及通用配置，包括mate、animateOption、interactions和pattern。通过这些配置，可以自定义图表的颜色、阴影、动画效果和交互行为，实现丰富的可视化表现。
摘要由CSDN通过智能技术生成

ant-design-charts是以G2Plot作为绘图引擎，来实现react可视化图表库，如果项目中以ant-design作为UI框架，那么使用ant-design-charts来实现数据可视化，是最合适不过了。

绘图属性，指的是图表的样式配置，比如折线图的lineStyle，柱状图的columnStyle，也有一些图表组件样式配置属性，比如label的样式label.style。

在修改图表属性的时候，其实就是设置G2Plot的属性。

绘图属性

配置图形样式

  1. fill：图形填充颜色
  2. fillOpacity：图形填充透明度
  3. stroke：图形描边
  4. lineWidth：描边宽度
  5. lineDash：描边虚线配置，是一个数组，第一个值表示虚线每个分段的长度；第二个值表示分段的间隔，lineDash:[0,0]表示没有描边
  6. lineOpacity：描边透明度
  7. shadowColor：图形阴影颜色
  8. opacity：整体透明度
  9. shadowBlur：图形阴影模糊系数
  10. shadowOffsetX：阴影的水平距离
了解本专栏 订阅专栏 解锁全文 超级会员免费看
读心悦
关注
专栏目录
订阅专栏
GitHub热门开源项目-2024版
生活在别处
07-15 929
前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。中英文敏感词、语言检测、中外手机/电话归属地/运营商查询、名字推断性别、手机号抽取、身份证抽取、邮箱抽取、中日文人名库、中文缩写库、拆字词典、词汇情感值、停用词、反动词表、暴恐词表、繁简体转换、英文模拟中文发音、汪峰歌词生成器、职业名称词库、同义词库、反义词库、否定词库、汽…互联网 Java 工程师进阶知识完全扫盲：涵盖高并发、分布式、高可用、微服务、海量数据处理等领域知识。各取所需，高效学习。
绘制双Y轴坐标系及其设置
G-无忧仙-LB——随笔
12-31 1480
绘制双Y轴坐标系及其设置 1、绘制双Y轴坐标系 在数据分析时，有时候我们需要在同一坐标图中比较两种数据在时间序列上面的关系 由于两种数据的单位和数据并不统一，也是不同的类型的数据，因此我们不能用一个Y轴来共同衡量两类 不同的数据，这时候我们就需要绘制双Y轴图。 绘制...
Ant Design Charts 教程
gitblog_00707的博客
08-07 898
Ant Design Charts 教程 ant-design-chartsA React Chart Library项目地址:https://gitcode.com/gh_mirrors/an/ant-design-charts 1. 项目介绍 Ant Design Charts 是一个基于 G2、G6、X6 和 L7 的React图表库。它提供了丰富的可视化组件，旨在为你的React应用提供...
ant-design-charts:一个React图库
03-19
@ ant-design / charts 一个基于React图表库 特征 便于使用 打字稿 漂亮轻巧 React灵敏 评书 安装 npm $ npm install @ant-design/charts 用法 import React from 'react' ; import { Line } from '@ant-design/charts' ; const Page : React . FC = ( ) => { const data = [ { year : '1991' , value : 3 } , { year : '1992' , value : 4 } , { year : '1993' , value : 3.5 } , { year : '1994' , value : 5 } , { year : '1995' ,
Ant Design Charts 常见问题解决方案
最新发布
gitblog_07910的博客
09-13 455
Ant Design Charts 常见问题解决方案 ant-design-charts A React Chart Library 项目地址: https://gitcode.com/gh_mirrors/an/ant-desi...
Ant Design Charts
相信自己，没有攀不过去的高山！
01-03 1032
Ant Design Charts面积图使用之遇到的bug
使用 Ant Design Pro 的图表（展示cpu、内存、硬盘）
西京刀客
01-11 2240
很多时候我们都需要一个美观大方的图表页来充当首页，在快速展示大盘信息的同时还能吸引眼球，提升系统的质感。所以我们也做了一个图表库 Ant Design Charts。
推荐开源项目：@ant-design/charts - 轻松构建React图表应用的利器
gitblog_00057的博客
06-08 863
推荐开源项目：@ant-design/charts - 轻松构建React图表应用的利器 去发现同类优质开源项目:https://gitcode.com/ 1、项目介绍 @ant-design/charts 是一个基于G2Plot的React图表库，提供了一套简单易用且功能强大的图表组件。它旨在为开发者带来优雅的设计，轻量级的体积，并具备响应式和故事叙述能力的图表解决方案。 2、项目技术分析...
Ant Design Chart词云图
AG.『Feng』的博客
02-16 1982
Ant Design Charts实现词云图
MongoDB和charts库的使用
王樰沫
12-24 1271
MongoDB和charts库的使用MongoDB数据存取第一步， 假设已经安装好了MongoDB， 使用管理员身份运行cmd，启动MongoDB服务。一般cmd.exe 在C:\Windows\System32中，找到cmd.exe-右击-以管理员身份运行。第二步， 在python中运行MongoDB， 实现对数据的存取数据特征的提取与可视化第一步， 同上面第一步。第二步，定位到MongoDB安...
vue+echarts 绘制折线图、柱状图和扇形图
JeffreytheCoder的博客
08-29 6519
前端时间在前端岗位上要实现Vue项目中的echarts画图，今天来分享下vue+echarts折线图、柱状图和扇形图的方法。每种图的echarts配置差不多一致，但根据图种需进行指定选项的改动。 一、折线图 折线图中，series要包含每条折线的数据。 <template> <div id="myChart"></div> </template> <script> import echarts from 'echarts' // 引入ec
ant-design-charts 对带缩略轴柱状图 根据数据自定义列处理， 以颜色为例
BGMcat的博客
02-23 956
本文主要对ant-design-charts中带缩略柱状图进行自定义列处理ant-design-charts版本：1.4.2"a": "七台河",'c': 2},"a": "万县",'c': 1},当需要对柱状图的列进行自定义处理时，可以用color属性，style属性，columStyle属性等通过对每一列对应的数据对象进行分析，来进行自定义处理，但是以上属性只包含x轴，y轴对应的属性如果需要依赖x轴，y轴对应的属性以外的属性进行判断时，可以用将该属性加入到数据中，增加属性。
Ant Design Charts 折线图配置属性结合案例详细说明
热门推荐
mingwei_zhu的博客
05-12 2万+
最近接手了一个react项目，里面需要用到折线图，看到图表的感觉不难。但是仔细一看引入的是 Ant Design Charts。然后去看了一下文档，发现好多地方的属性与echart区别很大，甚至用法都不一样了。最终结合文档，对属性一 一 试用了解，完成了任务。现给与记录，以便后来再使用方便。 实现目标( UI 给图 ) 现有折线图（ant 基础折线......
探索数据之美：Ant Design Charts - 可视化利器
gitblog_01185的博客
08-07 811
探索数据之美：Ant Design Charts - 可视化利器 ant-design-chartsA React Chart Library项目地址:https://gitcode.com/gh_mirrors/an/ant-design-charts Ant Design Charts 是一款基于React的高级图表库，融合了G2、G6、X6和L7等强大的底层可视化引擎。它不仅提供了丰富多样...
React使用Echarts/Ant-design-charts
weixin_57844432的博客
11-23 4572
React使用Echarts/Ant-design-charts。
Ant Design Charts 自定义提示信息、图例、文本信息
qq_42894991的博客
04-18 5762
图例位置，可选项：‘top’, ‘top-left’, ‘top-right’, ‘left’, ‘left-top’, ‘left-bottom’, ‘right’, ‘right-top’, ‘right-bottom’, ‘bottom’, ‘bottom-left’, ‘bottom-right’。type string 当用户使用了自定义的 label 类型，需要声明具体的 type 类型，否则会使用默认的 label 类型渲染（饼图 label 支持 `inner。提供横向布局和纵向布局。
Ant Design Charts绘制中国地图并动态添加标记点
weixin_55652851的博客
11-17 3245
Ant Design Charts绘制中国地图并动态添加标记点
Ant Design Charts基于 AntV 实现的 React 可视化图表库
知识点沉淀包括不限于前端
08-08 574
antV react charts 简单好用基于Antv实现
标题： 探索与创造：Ant Design Charts——优雅的React图表库
gitblog_00042的博客
06-08 431
标题：???? 探索与创造：Ant Design Charts——优雅的React图表库 ???? ant-design-chartsA React Chart Library项目地址:https://gitcode.com/gh_mirrors/an/ant-design-charts 在数据分析和可视化日益重要的今天，选择一个高效易用的图表库至关重要。Ant Design Charts 正是这样一款基...
ant-design-charts横坐标滚动事件
08-27
Ant Design Charts 的横坐标（X轴）滚动事件通常是指当用户通过鼠标滚轮或触控设备滚动图表的X轴区域时触发的一个自定义处理函数。这个事件允许开发者对用户的交互做出响应，比如更新数据、切换视图或者其他相关的业务操作。 在 Ant Design Charts 中，你可以通过监听 `onAxisScroll` 或者 `xAxis.onScroll` 方法来捕获这种滚动事件。具体的例子可能会像这样： ```jsx import { Line } from '@antv/g2'; const chart = new Line(document.getElementById('container')); chart.on('axis.scroll', ({ type, value }) => { // 当 X 轴滚动时，这里可以访问到滚动方向（向上或向下）和滚动距离等信息 if (type === 'x') { console.log(`X轴滚动了 ${value}`); // 这里可以进一步根据需要处理，比如调整视口范围或其他业务逻辑 } }); chart.render(); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

读心悦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值