1.charts.js
技术：基于HTML5 canvas
文档：英文（http://www.chartjs.org）、中文（http://www.bootcss.com/p/chart.js）
类型：6种图表类型（折线图，条形图，雷达图，饼图，柱状图和极地区域区）
量级：独立包，不依赖第三方 JavaScript 库，小于 5KB
大小：Chart.min.js-50.201 kb
特性：颜色，字体，边框和它们的尺寸都可以定制，图表可以动画的形式加载，非常炫
兼容：支持canvas的所有现代浏览器和大部分手机浏览器，自动针对retina屏幕做缩放
其他：图表如果使用动画效果，在PC端流畅，但是在移动端效果产生抖动延迟现象；如果不使用动画效果在移动端则正常显示
推荐指数：★★★★☆
分析：移动端表现佳，课通过自适应宽度来使得图表宽度与设备屏幕适配。适当缩小图表，合理展示数据。兼容能力强，API使用不复杂。
2.echart.js
用途：商业级数据图表，百度组件
技术：底层基于ZRender（一个全新的轻量级canvas类库）
类型：支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图等11类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
量级：轻量级，纯Javascript的图表库
特性：提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
兼容：可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等）
大小：echarts-plain.js – 449KB
推荐指数：★★☆☆☆
其他：文档说支持移动端但是目前在UC及QQ浏览器上都显示空白，微信上能显示图形，但是界面处理的不好，缩小太严重导致数据分不清。基础库文件太大。
分析：引入组件过大（449K）。需指定图表高度，使得图表不能只适应屏幕，手机端需要滚屏查看。能把图表生成图片。
3.ichart.js
技术：基于HTML5的图形库，使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形
特性：为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展示方面的解决方案
类型：饼图、环形图、折线图、面积图、柱形图、条形图
量级：轻量级，不依赖任何其他库，只和浏览器相关，一个完全独立的轻量级js组件
大小：ichart.1.2.min.js – 94.5 KB
兼容：跨平台，在现代的主流浏览器中运用自如
其他：基于Apache License 2.0协议的开源项目
推荐指数：★★★☆☆
分析：程序通过代码指定图表的高宽，所以可通过判断设备的宽度来实现自适应，但是如果设备宽度过小，还是会导致数据重叠显示情况。使用不灵活。
例子：柱形图，PC端与手机端显示一致，手机端并不会缩放，需要页面滚动
4.Canvasjs
技术：HTML 5 & JavaScript 图表库，基于 Canvas 元素
兼容：Graphs 可以通过设备渲染，包括 iPhone，iPad，Android，Windows Phone，Microsoft Surface，Desktops 等等。它允许用户创建适用于所有设备，不影响 web 应用程序的功能和可维护性的富仪表盘。
类型：基本数据图表格式
量级：轻量级
大小：canvasjs.min.js – 176KB
推荐指数：★☆☆☆☆
特性：有着非常漂亮的主题和超过传统的 Flash 和 SVG 图表 10x 倍以上的速度——生成轻量级，漂亮和响应式的仪表图
其他：收费
5.Highcharts
技术：基于svg技术
类型：直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表
兼容：支持目前所有的现代浏览器，包括IE6 +、iPhone/iPad、Android。在标准（W3C标准）浏览器中使用SVG技术渲染图形，在遗留的IE浏览器中使用VML技术来绘图
大小：highcharts.js – 149KB
数据：支持多种数据形式，可以是Javascript数组、json文件、json对象和表格数据等，这些数据来源可以是本地、不同页面，甚至是不同网站
特性：可以设置图表的缩放，让你更方便查看图表数据。功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库
分析：依赖于jQuery，通过样式控制自适应（min-width、max-width），在手机端表现良好。组件大小（150KB），
其他：支持移动端，根据页面宽度定义图表宽度。需要商业授权
推荐指数：★★★★☆
分析：移动端表现佳，能根据分辨率做相应的处理使得数据美观展示
6.Canvas
用canvas画自己中意的图表，适用于ui效果与插件类图表差异大的情况
工具
在线图表数据设计：http://www.ichartjs.com/designer/index.html
分析
从移动端的图表数据显示需求来看，由于移动端屏幕偏小，不能展示太多的数据，所以抛弃一些复杂数据显示形式。一般用到的格式为表格、曲线图、柱形图、饼图等。从以上几个组件分析来看，较适合的组件为chartjs和highcharts。而前者chartjs更为轻量，后者highcharts略繁重，主要看业务需求做取舍。
网友评论