博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
数据可视化学习之旅(一) React项目中初步使用Bizcharts
阅读量:5959 次
发布时间:2019-06-19

本文共 602 字,大约阅读时间需要 2 分钟。

Bizcharts是什么?

基于蚂蚁金服开发的可视化工具G2的React版本封装,使用体验更符合 React 技术栈的习惯,并且与 AntV 有着紧密的协同。

地址:

如何使用Bizcharts?

  • 安装BizCharts npm 包(建议使用淘宝镜像cnpm安装
npm install bizcharts --save复制代码
  • 地址:

常用API

  • padding:当坐标轴、图例等绘图区域外的组件显示不全时,可以通过调整图表各个方向的 padding 来调整最终效果,例如
复制代码
  • Axis: 坐标轴组件。当需要对坐标轴的value值做处理时,需要用到formatter属性,例如
`${val}°C` }} />复制代码
  • Tooltip: 提示框组件。因为自己在项目中遇到name为时间戳且没有找到如何在Tooltip中更改,此时可添加该属性,让提示框只显示value属性
复制代码

g2-tooltip属性可以修改提示框样式,例如opacity、border、padding、transition

  • Geom:几何标记组件,如点线面,可使用style属性更改样式,在组件中添加可以显示每个节点的值而不用鼠标hover时才会显示

结语

目前只是使用Bizcharts在项目中绘制了折线图,后续会继续发掘其他的可视化图型。

初次编写,谢谢阅读

转载地址:http://vzfax.baihongyu.com/

你可能感兴趣的文章
深入学习Java虚拟机之——垃圾收集算法与垃圾收集器
查看>>
android反编译之获得java源代码
查看>>
优盘驱动制作
查看>>
(分享)笔记C#基础知识
查看>>
resin
查看>>
PHP开发工具ZendStudio10
查看>>
wsl搭建php环境请求超时的问题解决方案
查看>>
spring基础
查看>>
微信用户名乱码问题
查看>>
dubbo spi(续)
查看>>
dubbo remoting(2)
查看>>
maya pyside 多个窗口实例 报错 解决
查看>>
关于文件上传请求第一次为post,后面为get的问题
查看>>
【Qt笔记】QDialog--模态和非模态
查看>>
nginx 0.8.54/1.0.0 在cygwin环境下的编译(包括 nginx_mod_h264
查看>>
PowerDesigner生成Excel版本的数据库文件
查看>>
Oracle 查找常见耗性能的语句
查看>>
java 通过反射获取调用类方法及属性
查看>>
thinkphp 开启页面的Trace信息
查看>>
mysql 链接数满了的错误 ERROR 1040 (HY000): Too many connections
查看>>