如何配置动态排名数据可视化插件（Historical-ranking-data-visualization-based-on-d3.js）

这是一个数据可视化项目，基于D3.js。能够将历史数据排名转化为动态柱状图图表。

先来看看效果：

作者 Jannchie 见齐还提供了官方视频教程：

不过由于开源项目的不断更新，该教程的部分内容已失效，本文针对 2018-12-25 版本总结了一些常用的配置说明，仅供参考。

从 GitHub 下载源代码，在 src 目录中可以看到 4 个文件：

bargraph.html --> 运行示例页面

config.js --> 配置文件

stylesheet.css --> 样式表

visual.js --> 核心文件

作者并没有将代码封装为插件的方式，所以我们是通过修改 config.js 配置文件的方式应用到自己的项目中的。

visual.js 虽然是核心文件，但作者将部分示例中的代码也包含其中，但并不影响我们直接在自己的项目中引用。

以下是 config.js 中的主要属性：

属性	说明	参考值
encoding	数据源（csv、json）等的文件编码	GBK / UTF-8 等
max_number	每个时间节点最多显示的条目数	10
showMessage	控制是否显示顶部附加信息文字	true / false
auto_sort	时间自动排序（详细含义、作用及限制见代码中注释）	true / false
timeFormat	时间格式，显示于图表右下角的时间	%Y、%Y-%M-%D 等
reverse	是否倒序	true / false
divide_by	类型根据什么字段区分？如果是 name，则关闭类型显示
divide_color_by	颜色根据什么字段区分？须要注意的是，如果配置成 name，则各条颜色不同（因为 name 值各异），如果配置成 type 等，那么相同 type 值的条颜色相同。	字段名
color	指定部分或所有条的颜色，该项与 divide_color_by 设置有关。	以 divide_color_by = 'name' 为例，"中国"是其中的一项 name 值，那么该项将显示 #D62728 色： color: { '中国': '#D62728' }
changeable_color	若 true 则颜色的深浅将根据数据的增长率实时改变
itemLabel	左边文字
typeLabel	右边文字
item_x
interval_time	时间点间隔时间	2
text_y
text_x
offset
display_barInfo	如果希望不显示，则可以设置较大的值，单位像素
use_counter
step
format	格式化数值
left_margin
right_margin
top_margin
bottom_margin
dateLabel_x
dateLabel_y
allow_up
enter_from_0
big_value
use_semilogarithmic_coordinate
long
wait	数据加载完成后开始播放前的等待时间	0
update_rate

xoyozo 6 年前

转载请注明出处

9,226 {{blog.voteUp}} {{blog.voteDown}}

可能相关的内容

Input string is not a valid interger. 百度编辑器 Blocked a frame with origin from accessing a cross-origin frame at baidu editor ui dialog LINQ to SQL Debug Visualizer 【CSS3】当 transition 遇上 border-radius