波斯码BOSSMA Information Technology

如何制作漂亮的”气泡云图”

发布时间:2018年1月27日 / 分类:JavaScript / 444 次浏览 / 评论

在曾经的博客时代,标签云十分流行,通过一堆大小不同的文字标示出相关主题的热度。气泡云图与此有类似的目的,通过气泡的大小展示相关主题的宏观对比。

气泡云图与气泡图有很大的差别,气泡图需要三个维度,而气泡云图只需要两个变量:主题和主题对应的数值。

这里是一个气泡云图的示例,用于展示某部门员工的业绩(是不是感觉很直观!!!):

ECharts、Highcharts都没有提供这种图表展现形式(或者是我没找到?)。

这个图表使用了D3进行制作,D3全称为Data-Driven Document,是一个提供数据可视化的Javascript库,它实际上不进行图表的渲染,只是将数据与页面元素进行连接。

下边就来看如何实现:

1、首先定义一个html页面

在页面中需要引用d3库,这里直接添加到head中了。

2、然后就是重点部分了

通过调用d3 API将测试数据绘制成图表,这里尽量注释详细点。

这里使用了一些静态测试数据,根据自己的需求修改dataSet就可以了。

数据中定义了一个className项,这个主要用于定义气泡的颜色,对于动态的数据,特别是数据量不好预估的情况,可以使用动态计算色值的方法,或者循环、随机从一组色值中选取。

绘制气泡的部分也可以增加直接设置气泡颜色的脚本,比如:

 

理解了相关脚本,用起来还是很简单的。

点击这里下载完整示例

 

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯码,原文地址《如何制作漂亮的”气泡云图”

0

关键字:

建议订阅本站,及时阅读最新文章!
【上一篇】 【下一篇】

发表评论