投稿

DataVisualization–基于Vue+D3.js可视化柱状动态排名

Vedu • • 程序开发, 资源分享 • 阅读 1698

今天给大家分享一个超赞的动态排名可视化柱状图表DataVisualization。

基于 Vue D3.js 可视化柱状动态排名

一个基于d3.js构建的将历史排名数据转换为可视化动态柱状图，star高达4.5K 。轻松制作排名可视化动画。

基于 Vue D3.js 可视化柱状动态排名

特性

  • 支持外部csv格式数据源
  • 支持图表自定义设置
  • 支持动态颜色及自定义渐变色
  • 柱状图支持圆角矩形

快速开始

打开src目录下的bargraph.html。点击选择文件按钮，选择csv格式的数据文件，便可以看到可视化结果。

基于 Vue D3.js 可视化柱状动态排名

csv数据格式

基于 Vue D3.js 可视化柱状动态排名

“名称”在柱状图左侧为Y轴，“类型-名称”会出现在柱状图上。值与柱状图的长度绑定，必须是整数或浮点数。日期建议使用的格式为”YYYY-MM-DD”。

大家可以发挥自己的创造力，制作类似如下非常炫酷的可视化动画效果。

基于 Vue D3.js 可视化柱状动态排名
基于 Vue D3.js 可视化柱状动态排名
基于 Vue D3.js 可视化柱状动态排名
基于 Vue D3.js 可视化柱状动态排名

非常棒的一个历史数据排名可视化动画，感兴趣的同学不可错过哟！

# 示例地址
http://data.viggo.site/

# 仓库地址
https://github.com/Jannchie/Historical-ranking-data-visualization-based-on-d3.js

ok，今天就介绍到这里。希望能喜欢哈！

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/12602.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
VeduVedu
0 0
上一篇 2020-10-17 07:35
下一篇 2020-10-17 07:38

相关推荐

发表评论

登录后才能评论