长条图赛跑动画实现

世界人口变化

​长条图赛跑动画的数据可视化作品屡见不鲜,比如年来世界人口变化、年来最流行的编程语言排行变化,视觉上酷炫吊炸天,彰显着数据可视化的魅力。这里介绍一个简单易用的长条图赛跑动画的React组件[1](这个组件AxisSort上有bug请使用修复版本[2]),并根据这个组件实现一个长条图赛跑动画。

技术栈

  • React
  • React-transition-group React官方的过渡动画库
  • create-react-app React官方脚手架工具

项目初始化

如果是学习React建议自己去配置webpack,Babel这些前端工程化的工具,搭建自己的项目架构。为了节省开发时间,本文使用脚手架工具来进行项目初始化构建。
cmd命令切到你要构建的项目目录下,执行这条命令
npx create-react-app my-chart-reace
前提是你已经安装了npm,一条命令项目的架子就搭起来了,简直不能再方便了。项目结构目录:

  • node_modules 依赖模块
  • public放置静态资源,如首页index.html(挂载react入口文件)
  • src文件,这个目录下整项目代码
  • 项目配置文件package.json等

安装模块依赖

create-react-app这个脚手架工具只预置了react以及react-dom,需要手动安装react-transition-group这个动画库。

1
yarn add react-transition-group 

长条图赛跑动画实现

使用react实现长条图赛跑动画,这里定义两个组件 Bar、BarChart,Bar组件用来实现一个矩形图以及赛跑动画,BarChart组件上使用Bar组件实现条形图。最后,将BarCahrt组件挂载到App.js文件上(这也是一个组件,react就是组件套组件),即可完成长条赛跑图的挂载。

1. Bar组件的实现

Bar组件

2. ChartBar组件的实现

BarChart组件

3. ChartBar组件挂载到App.js文件

App.js

4. 数据配置

BarChart组件需要传入很多值,通过这些值来配置使用BarChart组件。长条图数据data、时间线timeline、长条图标签labels、长条图颜色colors如下:

数据配置

其他需要传入的值比较简单,可以直接在组件属性上定义,相邻时间索引的过渡时间timeout(单位毫秒),相邻时间索引之间的等待时间delay(单位毫秒),时间线样式timelineStyle,文本样式textBoxStyle,长条矩形图样式barStyle,label、bar以及textbox的宽度分布(总和100),传入的数据项最大数量(小于等于数据键的长度)。关于传值上面代码几乎都使用了,详细了解可以去Github。

万事俱备,yarn start,长条图赛跑就华丽地跑起来了….
秀一下成果~~~

长条图赛跑动画Demo

这个Demo已经push到github,可以克隆体验。

https://github.com/xuxiaoyang/ChartBar-Race-Demo

References

[1] https://github.com/Mckinsey666/chart-race-react
[2] https://github.com/xuxiaoyang/chart-race-react