这是我在公司实习期间,要求做一份常用图标插件的报告,花了接近2周的工作日来做的。怎么办,感觉自己效率好低。
本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。
一、简单介绍
1.HighCharts
特点:
- 收费的、也有免费的
- 功能强大,图表类型比较多,可自定义的范围比较大
- 支持2D、3D
- 体积比较大
- 支持IE8或以下
- 245KB+232KB(3D)
- SVG格式的
- 支持原生JavaScript、JQuery
2.ECharts
官网:中文
特点:
- 开源,使用原生JavaScript
- 百度的,对中文的支持比较好,容易维护
- 体积相对小,支持模块化处理
- 支持模块化引入,可以根据需要扩展模块
- 不支持IE8或以下的
- Canvas格式
3.D3.js
特点:
- 图表类型丰富、表现酷炫
- 使用SVG格式
- 仅支持现代浏览器,对IE9或以下版本支持不是很好
- 独立库
- 322KB
- 函数编程,不像其他插件那样直接用JavaScript对象,学习难度大
- 自定义的参数比较多
- 比较多人用
4.Chart.js
官网:中文
特点:
- 有中文文档
- 基于MIT开源,使用原生JavaScript
- 支持所有现代浏览器和大部分手机浏览器都支持canvas,IE8或以下,另外引js包
上面是我用了一周的时间做的,下面是我用另外一周做的,因为这个原因,第四个Chart.js变成了JsChart,我测试的时候一直在奇怪怎么有个这个垃圾的插件,而且还收费。
二、测试项目及结果
在本章节中,将从内存、兼容性以及移动端的使用体验三个方面,对以上四个插件进行测试。
1.内存
1.1 加载内存
测试内容:查看简单的图表,检测页面启动10秒内,内存消耗及运行情况。
测试环境:64位PC版Chrome 42。
(1) ECharts
消耗内存:9.5MB
图1 ECharts 显示的图表
图2 ECharts内存消耗情况
(2) D3.js
消耗内存:3.8MB
图3 D3.js显示的柱状图
图4 D3.js内存消耗情况
(3) HighCharts
消耗内存:7.3MB
图5 HighCharts显示的柱状图
图6 HighCharts内存显示情况
(4) JSCharts
消耗内存:5.0MB
图7 JSCharts显示的图表
图8 JSCharts消耗内存的情况
本测试项目测评结果:
排名 | 名称 | 内存消耗 | 评分 |
1 | D3.js | 3.7MB | 100 |
2 | charts.js | 5.0MB | 74 |
3 | HightCharts | 7.3MB | 50.68 |
4 | ECharts | 9.3MB | 39.78 |
1.2长时间内存变化情况
测试内容:以15个柱状图为例,禁用动画效果,每50ms测试更新数据一次,1小时内查看内存的及CPU的变化情况。
每50ms刷新一次数据,数据是由随机数产生。
生成柱状图数据代码:
function setData() {
dataset.splice(0, dataset.length);//清理上次数据内存
for (var i = 0; i < 15; i++) {
dataset.push(Math.ceil(Math.random() * 200));
}//添加数据
}
测试环境:Windows 8.1下的IE 11和Chrome 42。
(1)ECharts
更新数据难易度:容易,直接调用API,插入数据即可
ECharts在更新数据时,表现卡顿,浏览器陷入卡顿状态。
图9 ECharts在IE11下的截图
图10 ECharts在Chrome下运行1小时后内存的情况
测试结果
浏览器 | 流畅度 | 开始时间 | 结束时间 | 开始内存 | 峰值内存 | 结束内存 | 内存损耗 |
IE11 | 比较流畅 | 15:15 | 16:15 | 39.4 | 68.8MB | 58.4MB |
|
Chrome | 卡顿 | 14:35 | 15:35 | - |
| - | 13.9MB |
(2)D3.js
更新数据难易度:比较难,需要自己编写API,调用自己编写的API插入数据。
图11 D3.js在IE11下的截图
图12 D3.js在Chrome下运行1小时后内存的情况
测试结果
浏览器 | 流畅度 | 开始时间 | 结束时间 | 开始内存 | 峰值内存 | 结束内存 | 内存损耗 |
IE11 | 流畅 | 14:12 | 15:12 | 47.6MB | 78.8MB | 60.8MB | - |
Chrome | 流畅 | 14:00 | 15:00 | - | 7.6MB | - | 6.0MB |
(3)HighCharts
更新数据难易度:容易,使用插件提供的API,按照格式插入数据即可。
图13 HighCharts在IE11下的截图
图14 HighCharts在Chrome下运行1小时后内存的情况
测试结果
浏览器 | 流畅度 | 开始时间 | 结束时间 | 开始内存 | 峰值内存 | 结束内存 | 内存损耗 |
IE11 | 流畅 | 16:16 | 17:16 | 35.6MB | 80.9MB | 80.8MB | - |
Chrome | 比较流畅 | 15:41 | 16:41 | - | - | - | 10.6MB |
(4)JSCharts
更新数据难易度:简单,更换绑定数据即可。
使用IE11测试时,开始的时候非常流畅,使用6分钟后,IE开始不稳定,拖动IE延时非常明显。
图15 JSCharts在IE11下的截图
在使用Chrome测试时,最后几分钟,图表更新速度缓慢,几秒才更新一次。
图16 JSCharts在Chrome下运行1小时后内存的情况
测试结果
浏览器 | 流畅度 | 开始时间 | 结束时间 | 开始内存 | 峰值内存 | 结束内存 | 内存损耗 |
IE11 | 流畅变卡顿 | 17:17 | 18:17 | 55.8MB | 168.7MB | 162.8MB | - |
Chrome | 卡顿变停滞 | 16:29 | 17:29 | - | - | - | 9.5MB |
本测试项目测评结果:
总体来说,除了charts.js之外,其他插件在测试期间的表现比较稳定,虽然内存都无一例外地升高。各个在程序切换过程中,会出现不同程度的延迟,但charts.js表现最为明显。
下面的成绩均取最优结果:
名称 | ECharts | D3.js | HighCharts | charts.js |
是否支持动态更新 (40%) | 是 | 是 | 是 | 是 |
更新数据格式(5%) | XML、JSON、CSV | XML、JSON、CSV | JSON | JSON |
更新数据难易度(15%) | 容易 | 比较难 | 容易 | 简单 |
更新数据流畅度(20%) | 比较流畅 | 流畅 | 流畅 | 卡顿 |
内存(MB)*(20%) | 13.9 | 6.0 | 10.6 | 9.5 |
分数 | 79.88 | 88.75 | 87.57 | 72.63 |
排名 | 3 | 1 | 2 | 4 |
* 内存指的是插件在Chrome下使用的内存
2.兼容性
测试内容:测试各个浏览器下的兼容性情况
测试环境:
浏览器 | 系统 |
IE8 | 基于Windows XP sp3 |
IE9 | 基于Windows Phone 7.8 |
IE11 | 基于Windows 8.1 |
Chrome 移动版 | 基于Android 4.4.2 |
(1) ECharts
表1 ECharts兼容性
浏览器 | 动画效果 | 显示情况 |
IE 8 | 无 | 正常 |
IE 9 | 有 | 正常 |
IE11 | 有 | 正常 |
Chrome 移动版 | 略有卡顿 | 正常 |
(2) D3.js
表2 D3.js兼容性
浏览器 | 动画效果 | 显示情况 |
IE 8 | - | 无显示 |
IE 9 | 有 | 正常 |
IE11 | 有 | 正常 |
Chrome 移动版 | 略有卡顿 | 正常 |
(3) HighCharts
表3 HightCharts兼容性
浏览器 | 动画效果 | 显示情况 |
IE 8 | 无 | 正常 |
IE 9 | 有 | 正常 |
IE11 | 有 | 正常 |
Chrome 移动版 | 略有卡顿 | 正常 |
(4) JSCharts
表4 JSCharts兼容性
浏览器 | 动画效果 | 显示情况 |
IE 8 | 略有卡顿 | 正常 |
IE 9 | - | 无显示 |
IE11 | 有 | 正常 |
Chrome 移动版 | 有 | 模糊 |
本测试项目测评结果:
排名 | 名称 | 兼容性 | 评分 |
1 | ECharts | 在各个浏览器上均能正常显示,但在IE8中没有动画效果,在移动版中动画略显卡顿 | 91.75 |
1 | HighCharts | 在各个浏览器上均能正常显示,但在IE8中没有动画效果,在移动版中动画略显卡顿 | 91.75 |
3 | D3.js | 除了在IE8中无法显示之外,移动版中动画略显卡顿,在其他版本均能正常显示 | 67 |
4 | charts.js | 在IE9中无法正常显示,在移动版中显示模糊 | 62.75 |
3.移动端
测试内容:使用图表插件官网上的图表示例,查看包括手机及平板下的使用效果
测试环境:Chrome模拟器下的iPhone 6、Windows Phone 7.8、三星平板
(1) ECharts
图17 Echarts在平板下的浏览效果
在平板浏览中,除了显示动画效果中有点卡顿之外,在使用中还是比较流畅的。在旋转屏幕时,图表还会根据屏幕大小发生变化。点击元素时,还会显示该元素代表的数据,整体感觉还是不错。在浏览期间,浏览器的内存在80~90MB之间。
在手机浏览中,显示动画同样出现卡顿现象,但感觉比平板使用更加流畅。但是,在放大图标时,出现锯齿现象,在较小屏幕中,有些元素没有显示完整。
表5 ECharts移动设备使用情况
设备 | 平板 | 手机 |
动画 | 卡顿 | 卡顿 |
流畅度 | 比较流畅 | 流畅 |
视觉体验 | 华丽 | 华丽 |
屏幕旋转 | 大小自适应 | 屏幕小时,显示不完整 |
点击元素 | 显示元素数据 | 显示元素数据 |
内存使用情况(MB) | 80~90 | - |
缩放 | 正常显示 | 出现锯齿 |
(2) D3.js
图18 D3.js在平板下的浏览效果
在手机浏览中,D3.js的加载时间略长,甚至浏览器直接闪退。但,图表显示后,显示还是流畅的。放大也没有锯齿。
表6 D3.js移动设备使用情况
设备 | 平板 | 手机 |
动画 | 比较流畅 | 加载时间长 |
流畅度 | 比较流畅 | 流畅 |
视觉体验 | 朴素 | 朴素 |
屏幕旋转 | 大小自适应 | 大小自适应 |
点击元素 | 显示元素数据 | 显示元素数据 |
内存使用情况(MB) | 155~165 | - |
缩放 | 正常显示 | 正常显示 |
(3) HighCharts
图19 HighCharts在平板下的浏览效果
在平板使用中,加载速度还是比较快的,但动画及使用中,还是比较卡顿且不自然。虽然如此,但在使用过程中,内存在60~75MB之间浮动。缩放显示效果正常。
在手机使用中,加载速度比较快,动画略显卡顿,使用过程比较流畅,缩放功能及旋转屏幕均能正常显示。
表7 HighCharts移动设备使用情况
设备 | 平板 | 手机 |
动画 | 比较卡顿且不自然 | 卡顿 |
流畅度 | 比较卡顿 | 流畅 |
视觉体验 | 华丽 | 华丽 |
屏幕旋转 | 大小自适应 | 大小自适应 |
点击元素 | 显示元素数据 | 显示元素数据 |
内存使用情况(MB) | 60~75 | - |
缩放 | 正常显示 | 正常显示 |
(4) JSCharts
图20 JSCharts在平板下的浏览效果
在平板使用中,加载及动画比较快,使用过程中非常流畅,没有停滞的感觉。但是功能比较少,点击元素没有显示元素数据,放大图表时有明显锯齿显示。使用工程中,内存在30~35MB之间浮动。
在手机使用中,使用体验与平板类似,比较视觉效果比较粗糙,功能也相对简单。
表8 JSCharts移动设备使用情况
设备 | 平板 | 手机 |
动画 | 流畅 | 流畅 |
流畅度 | 流畅 | 流畅 |
视觉体验 | 粗糙 | 粗糙 |
屏幕旋转 | 大小自适应 | 大小自适应 |
点击元素 | 无效果 | 无效果 |
内存使用情况(MB) | 30~35 | - |
缩放 | 出现锯齿 | 出现锯齿 |
本测试项目测评结果:
在这个测试项目中,比较难给出结果,因为每一款插件都或多或少地出现了功能及性能上的不足。因此,在这个项目中,将功能的权重放高一点,以点击元素(20%)、缩放(18%)、屏幕旋转(16%)、流畅度(14%)、动画(12%)、内存使用(11%)、视觉体验(9%)给出比分,并以流畅(100%)、比较流畅(50%)、卡顿(0),给出最终结果:
排名 | 名称 | 平板评分 | 手机评分 | 平均评分 |
1 | HighCharts | 71.25 | 77 | 74.13 |
2 | D3.js | 71.5 | 72.5 | 72 |
3 | ECharts | 76.42 | 43 | 59.71 |
4 | charts.js | 53 | 42 | 47.5 |
三、综合评分
排名 | 名称 | 内存测试1(15%) | 内存测试2(15%) | 兼容性(30%) | 移动设备使用情况(30%) | 加权平均分 |
1 | HighCharts | 50.68 | 87.57 | 91.75 | 74.13 | 70.50 |
2 | D3.js | 100 | 88.75 | 67 | 72 | 70.01 |
3 | Echart | 39.78 | 79.88 | 91.75 | 59.71 | 63.39 |
4 | charts | 74 | 72.63 | 62.75 | 47.5 | 55.07 |
四、参考资料
JavaScript图形库的流行度调查:http://www.ourd3js.com/wordpress/?p=831
感谢 浩哥 给我提供测试内存的方法。