数据可视化,BizCharts图表库入坑历程
前言
作为一个前端打字员,除了绿茶婊之外,最讨厌的就是图表:一个让我伤心,一个让我难过;比这更讨厌的就是文档写得不清不楚的图表库(大概率是九年义务教育期间没有学好语文),让我又爱又恨!所以本篇博文会比较枯燥,只简单描述一下使用BizCharts的过程,当然,重要的是总结遇到的坑(遵从一个坑不踩两次,一个女生不泡两次原则)。
By the way,提到BizCharts,让我们感谢一下阿里巴巴:其开源了这个好用的(虽然偶尔不那么好用,还偶得挺经常的)的react图表库供大家使用,对使用react技术栈的前端打字员来说简直就是福音。本文不会有过多的api解释,具体的接口可以看官网文档鬼门关。
正经篇幅
刚开始,视觉设计师哄我说:“我的要求并不高,待我从前一样好”,啊呸,说错了,“我的要求是:只要能把数据用直方图展现出来就好了”,so easy
// 引入相关的组件import { Chart, Axis, Tooltip, Geom } from 'bizcharts';// 随便mock一下数据const str = ['we', 'are', 'the', 'black', 'gold', 'team'];const mockData = () => {let result = [];for (let i = 0, len = 6; i < len; i++) {result.push({xAxis: ticks[i],yAxis: Math.floor(Math.random() * 100)});}return result;};// 图表组件<Chartwidth={ 600 }height={ 400 }data={ mockData() }>{/* x轴,横轴,以data数据的xAxis属性值为柱子的值 */}<Axis name="xAxis" />{/* y轴,纵轴,以data数据的yAxis属性值为柱子的值 */}<Axis name="yAxis" />{/* 鼠标hover直方图柱子的时候,tooltip显示的值 */}<Tooltip />{/* 几何标记对象,主要用以描述你要画的是什么图形(直方图、折线图、饼状图、区域图):interval是直方图 */}<Geomtype="interval"position="xAxis*yAxis"/></Chart>
复制代码
一波操作猛如狗,让视觉设计师看看效果:
note:此直方图每一根柱子都是单点的,也就是其反映了某个横坐标点的数据情况。加入我们需要一个连续区间柱子,那么作为xAxis的数据字段值应该为一个数组,包含两个元素,表明区间的起始值。
const mockData = () => {let result = [];for (let i = 0, len = 6; i < len; i++) {result.push({xAxis: [i + 0.01, i + 1 - 0.01], // 如果不加减0.01,那么第一根柱子的终点跟第二根柱子的起点是同一个,会感觉两个柱子粘在一起yAxis: Math.floor(Math.random() * 100)});}return result;};
复制代码
视觉设计师:“emmmmmm,图表长宽定死了会不会有点僵硬啊,高度可以写死,宽度总得来个自适应吧?”
“毛闷台”
<Chartheight={ 400 }data={ mockData() }forceFit // 我妈说了(guanfang wendang shuode),加上这个属性就可以使图表宽度自适应了,隔壁echart同学要学习一下></Chart>
复制代码
效果秀一波
视觉(蜜汁微笑):“猿子,你这玩意有bug啊”
“胡说,你这傻*不会用吧”
(理直气壮)“哼哼,放大窗口图表宽度确实会自适应,但是缩小就挂掉了(并不自适应),ahhhhhh”
(谄媚)“讨厌,再给我两分钟~~让我把bug结成冰。。。”
note: 实验表明,如果Chart组件的父组件Father采用flex布局,即Father使用flex自适应宽度,那么就会出现上述的问题;所以,如果有多个图表同行并列布局,请不要使用flex布局,给Father组件的宽度设置为百分比吧,此时的forceFit就会起作用了。同时,BizCharts对重绘设置了防抖,只有当停止缩放的时候才会重绘。
(屌到飞起)“over,拿去用吧”
(一脸鄙视)“哇喔~好棒棒呀,敢不敢让我调一点点小细节,我保证就一点点!”
“Come on baby!”
“
- 鼠标hover柱子的时候,为什么柱子后面有个很丑的方框,换个颜色吧!
- 鼠标hover柱子的时候,出现的tooltip样式丑爆了,待会我给你设计一个吧
- 鼠标hover柱子的时候,柱子的颜色应该有所改变,对用户比较友好!!!
- ...哎,你别拿刀啊~~~
”
把视觉杀了之后,需求还是要做的,先解决死者的第一个遗愿。
Tooltip组件提供了一个属性crosshairs,用以设置tooltip的辅助线和辅助框;默认情况下,此属性会为’line’、‘area’、‘path’、‘areaStack’类型的Geom组件开启垂直辅助线、为‘interval’类型的Geom组件展示矩形背景框。死者说的很丑的方框就是这个!
<Tooltip crosshairs={ false }/>
复制代码
好的,把框去掉了!咦,我们不是说要修改它的颜色吗?好的,改一下
<Tooltipcrosshairs={{type: "rect" // 可选值:rect、x、y、cross,分别对应辅助狂、平行x轴辅助线、平行y轴辅助线,十字辅助线style: {fill: 'red', // 辅助框颜色shadowColor: 'red', // 辅助框周边阴影的颜色shadowBlur: 1, // 辅助框周边阴影的透明度opacity: 0 // 辅助框的透明度}}}/>
复制代码
note:假如开启的是辅助线,即type不是“rect”,那么上述的样式定义将不起作用。究其原因,看了此组件的源码之后才发现,描述辅助线样式的属性不是style对象,而是lineStyle对象,官方文档并未说明这一点。
<Tooltipcrosshairs={{type: "y"lineStyle: {stroke: 'red', // 辅助线颜色lineWidth: 4, // 辅助线宽度,单位为pxopacity: 1 // 辅助线透明度}}}/>
复制代码
看起来还是很容易就实现了死者的第一个遗愿,就这样怼死了视觉,是不是太残忍了点?事已至此,继续实现他的遗愿吧。
第二个遗愿是给tooltip换个样式。既然要修改tooltip的样式,就应该继续对Tooltip组件下手。通过阅读文档,发现其还有一个itemTpl的属性,也就是可以通过这个属性定义tooltip的模板
// 定义一个模板// name-value是相关柱子的key-value值const tooltipsDisplayTpl = `<p class="chart-tooptip"><span class="chart-tooptip-right">{name}</span><span>{value}</span></p>`;/*// 重写tooltip元素的样式// 因为视觉已死,样式是随便搞的,就弄点黑色背景当默哀一下吧.g2-tooltip {background-color: rgba(44, 49, 68, 0.80) !important;}.chart-tooptip {margin: 0;color: white;}.chart-tooptip-right {margin-right: 12px;}*/<Tooltipcrosshairs={ false }itemTpl={ tooltipsDisplayTpl }showTitle={ false } // 去头(标题,即横轴对应的刻度),往往影响我颜值的不是我的身材,而是我的脸,所以不要脸了/>
复制代码
note:如果想自定义tooltip展示的内容,还需要设置Geom组件的tooltip属性,即将数据映射到Tooltip对象上;所以此属性值如果为false的话,就不会向Tooltip组件传递任何数据(此时Tooltip只会显示title);还可设置为字符串,展示字符串对应的数据字段;But, it's not the point,重点在于可自定义
// 定义数据返回的格式,name属性对应的是itemTpl里面的同名变量const getTooltipData = (xAxis, yAxis) => {return {name: xAxis,value: yAxis};}<Geomtype="interval"position="xAxis*yAxis"tooltip={["xAxis*yAxis", getTooltipData]}/>
复制代码
第二个遗愿也实现了,愧疚感也多了一点!最主要是写代码的时候老是觉得后面有人站着盯着我看。
说不定实现所有遗愿就不会有这种感觉了呢,那就继续第三个遗愿吧:“改变鼠标hover柱子时候柱子的颜色”,翻遍了整个文档,发现没有关于hover的接口啊!看来视觉是要死不瞑目了,阿门。
就在我感觉到后背越发的凉飕飕的时候,我发现Geom组件有一个属性active
文档就真的描述了那么两句话,也没例子。急病乱投医的我只能尝试一波,设置为true,得了,hover柱子的时候柱子颜色改变了!!!
<Geomtype="interval"position="xAxis*yAxis"tooltip={["xAxis*yAxis", getTooltipData]}active={ true }/>
复制代码
那如果需要自定义鼠标hover柱子的样式呢?对照着Geom文档的select属性,又尝试了一遍
<Geomtype="interval"position="xAxis*yAxis"tooltip={["xAxis*yAxis", getTooltipData]}style={{ cursor: 'pointer' }} // 鼠标hover上去的时候,显示小手手,免费送的active={[true,{style: {fill: 'black', // 柱子颜色,继续默哀shadowColor: 'red', // 整体阴影颜色,包括边缘shadowBlur: 1, // 阴影的透明度opacity: 0 // 柱子颜色透明度}}]}/>
复制代码
(神气的)“狗子,别死了,老子搞定啦”
“靠,我都装死两天了,你敢不敢再慢一点”
“那官方文档就写了一行字:只可意会不可言传!我天分有限,意会了比较久”
“嘚瑟,看,又出bug了吧!你的表子一闪一闪的”
(掐着他脖子使劲晃)“那TM不是bug!!!”
不过话说回来,当数据更新时,从旧数据切换到新数据,会很突兀,没有缓冲过程,看着特别不舒服。我寻思着,在数据更新的时候,加个动画呗!但是初始动画生效了,更新动画就不生效了(如看官们知道解决办法,请不吝赐教)。由于赶着下班,我决定使用DataSet:一个用于管理表格数据的神器,据说更新数据的时候,其会给我弄个动画(除此以外有方便地导入非json数据等等功能,下文有一些例子,具体细节我没有详细去研究,以后学习了再分享)。唔好理,总之好犀利!
// 安装// npm install @antv/data-set// 引入import DataSet from '@antv/data-set';// 生成一个View实例,作为类的属性,故不要在render方法里面生成这个实例dv = new DataSet().createView();render() {this.dv.source(data);<Chartheight={ 400 }data={ this.dv }forceFit></Chart>}
复制代码
“猿子,6啊!吃宵夜吗?我的”
“虽然不怎么饿,但是你请就不一样了,go”
吃了一桶泡面后......
“猿子,你看,宵夜也吃了·······”
“你又想干嘛···············”
简直就是饱饭思淫欲啊!!!
”我只是觉得柱子的颜色可以渐变会显得我们公司的产品更屌一点“
”狗子,你扛揍不?“
(可怜兮兮)”揍完之后可以加个渐变吗......“
”......“
”我就知道你对我最好了,我给你捶背捏大腿吧~“
”滚一边去“
<Geomtype="interval"position="xAxis*yAxis"tooltip={["xAxis*yAxis", getTooltipData]}color={['xAxis', '#3DA4FF-#FFFFFF']}/>
复制代码
(掐着我脖子使劲晃)”老子要的是从上往下渐变,不是从左往右渐变“
“别.....别.....掐.....我....改....改.....”
<Geomtype="interval"position="xAxis*yAxis"tooltip={["xAxis*yAxis", getTooltipData]}color={['xAxis', 'l(90) 0:#3DA4FF 1:#FFFFFF']}/>
复制代码
note:l是指线性渐变,90是指旋转九十度(即从上到下渐变,看官们可以多试试几个姿势,啊呸,多试试几个角度)
0和1标定的色值标明初始色值和终止色值,注意一点,色值不可以使用颜色名字,如“red”、“blue”等
可添加多个渐变色值,如
color="l(90) 0:#000000 0.5:#FFFFFF 1:#000000"
复制代码
note:如果是area类型的Geom,那么第一种渐变方式是不起作用的,只能选用第二种
“狗子,我真要下班了”
“那个,你看都搞着渐变了,要不搞一波颜色分类”
”没得谈,goodbye!“
”宵夜我的“
”顶你个肺,又想用泡面忽悠我!!!“
”撸串,骗你我是狗“
”emmmmmm.....“
既然提到颜色分类,我们就接着提一下dv.transform 吧, dv.transform内置了一些基础的函数:filter,map,pick,rename,reverse …… 具体可自行查看文档
只需要添加 groupBy 字段,并且在传入的原始数据data中添加对应的字段classify即可轻松搞定。
dv.transform({groupBy: ['classify'], // 以classify字段进行分组 });
复制代码
”猿子,颜色还是要自定义的哦“
(白眼)
<Geomposition={'xAxis*yAxis'}color={['classify', classify => {// 这里根据不同字段返回不同颜色return classify === 'test' ? 'red' : 'yellow';}]}style={{ cursor: 'pointer' }}/>
复制代码
作为一个有责任的前端打字员,有一点即使设计不要求的,我还是需要说明的,横轴的刻度值是可以自定义的
<Axisname={xAxis}label={{textStyle: {fill: 'red', // 颜色textBaseline: 'top' // 对齐基线},formatter: (val) => {return `${ val }\n换行了`}}}/>
复制代码
”狗子,撸串去!!!“
”要不还是吃个泡面????“
狗子,卒!
总结
感谢看官们看完了我的胡扯,需要更正一点的是,我司程序员与视觉、交互设计师的相处是非常友爱和睦的。以上总结,仅参考学习之用,不喜勿喷;如有错漏,欢迎指正。
@Author: beidan, PaperCrane
数据可视化,BizCharts图表库入坑历程相关推荐
- 开源的数据可视化JavaScript图表库:ECharts
ECharts (Enterprise Charts 商业产品图表库)是基于HTML5 Canvas的一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽 ...
- 数据图表与分析图_史上最全最实用的数据可视化分析图表制作工具汇总
俗话说的好:工欲善其事,必先利其器!一款好的工具可以让你事半功倍,尤其是在大数据时代,更需要强有力的工具通过使数据有意义的方式实现数据可视化,还有数据的可交互性;我们还需要跨学科的团队,而不是单个数据 ...
- 数据可视化之矢量库 Pygal
数据可视化之矢量库 Pygal Pygal 官方文档 http://www.pygal.org/ 这次介绍一个不那么广为人知但依然优秀的可视化库-Pygal. 最好得学习方式就是官方文档. 大家多多支 ...
- 几种常见的数据可视化分析图表
可视化技术的高速发展带动着数据的进步.数据可视化的数据分析图表,借助于可视化的大屏,将数据以图表的形式进行汇总分析,加快着用户对于数据的接受时间,同时对于整体的布局美观,也是一种合理化的设计.如何设计 ...
- Echarts数据可视化event图表事件的相关操作,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化action图表行为的相关操作,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Python数据可视化之Plotnine库超详细教程系列
Python数据可视化之Plotnine库超详细教程系列(一):概述 一.Plotnine库简介 ggplot2包奠定了R语言数据可视化在数据科学中的地位,数据可视化一直是Python的短板,即使有M ...
- python题库和答案_Python数据分析与数据可视化_题库免费答案2020
Python数据分析与数据可视化_题库免费答案2020 更多相关问题 撰写纪要时,发现与会者发言质量不高时,可以进行拔高.提炼,一定要做好后期加工.() 在发布的对象中,凡是属于法规性文件,标题和正文 ...
- 12个用于数据可视化的JavaScript库
无论哪个行业,全世界的企业都越来越依赖数据,尤其是在非常大的群体中时,要对过去和未来进行假设. 除了收集数据之外,通常还必须将这些数据转换为有效的图表,以突出显示所有必要的发现:JavaScript语 ...
最新文章
- 2022-2028年中国老年旅游市场深度调研及开发战略研究报告
- c语言中 允许函数重载么,简述C++语言支持函数重载问题介绍
- junit5_使用junit做其他事情
- Control.BeginInvoke 和 Delegate.BeginInvoke 备忘
- Activity 切换动画
- boost::python::converter::is_object_manager相关的测试程序
- 判断一个数是不是回文数
- Even Three is Odd
- 途家供应链系统架构演进实践
- 不一样的 LaTeX 教程(第二话):LaTeX 多级标题设置必知必会
- 交流异步电机的Modelica模型
- sql python excel_数据技能篇(EXCEL,SQL,Python)
- 安利一个自动求导网站
- 二叉树:输出根节点到叶子的路径
- 图片文字识别软件有哪些?这几款软件亲测非常好用
- 解决“com.android.dex.DexIndexOverflowException: method ID not in [0, 0xffff]: 65536”问题
- 笔记本计算机内部部件图片,笔记本内部硬件构造图
- 广工工作室各方向学习指南
- 光伏能给企业带来了哪些好处
- submit() 吃异常
热门文章
- C++ fgets()函数
- ansible批量修改主机密码(非明文)
- Windows驱动_WDDM之一
- iis启动和停止的方法介绍
- 用python实现简单五子棋游戏的练习过程
- Eth-Trunk的配置
- 公网部署freeswitch1.8.6后,终端注册成功后,在fs_cli控制台执行originate user/1000 echo,呼通1000的SIP终端后,终端讲话没有收到fs的回声解决方法
- 虚拟存储器 与虚拟内存详解
- 网络安全----数据库1
- rancher k8s集群pod一直处于Pending状态