好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

新闻地图迭代内容简介_html/css_WEB-ITnose

新闻地图本次迭代主要对图表的内容进行增加以及视觉设计进行修改。

可视化部分新增内容:矩形树图

矩形树图(treemap)简介

treemap由马里兰大学教授Ben Shneiderman于上世纪90年代提出,起初是为了找到一种有效了解磁盘空间使用情况的方法。

教授首先想到的是用树状结构来表示,但是这样图表会太占空间。那么如何在受限空间内展示树状数据结构呢?Ben教授想利用面积来表示文件大小,但是用矩形、三角形还是圆形都有一定的问题。

正当Ben教授在休息室中思考时,突然“Aha”,想到了将屏幕交替切分为水平和垂直方向的矩形,用递归来实现层级关系。教授花了几天时间验证这个想法,并完成了只有六行的算法。算法和最初的设计发表在1992年1月的《ACM Transactions on Graphics》上。

作者:Xhinking 链接:http://zhuanlan.zhihu.com/datavis/19894525 来源:知乎

在矩形树图中,每个节点都有名字和相应的大小。如果用矩形树图表示我们熟悉的文件目录列表,那么叶子节点的大小就能表示各个文件的体积,父节点就能表示文件夹的体积也就是它包含的文件体积之和

矩形树图的应用

很多磁盘管理App使用Treemap帮助用户可视化磁盘状况。如Mac平台上的Disk Map for Mac,windows的spacesniffer。

使用echarts实现treemap 引入echarts

ECharts 3 开始不再强制使用 AMD 的方式按需引入,代码里也不再内置 AMD 加载器。因此引入方式简单了很多,只需要像普通的 JavaScript 库一样用 script 标签引入。

                      
动态加载所需图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 dom 容器。

          

查看更多关于新闻地图迭代内容简介_html/css_WEB-ITnose的详细内容...

  阅读:30次