摘要：

　　在大数据时代，很多时候我们需要在网页中显示数据统计报表，从而能很直观地了解数据的走向，开发人员很多时候需要使用图表来表现一些数据。随着Web技术的发展，从传统只能依靠于flash、IE的vml，各个浏览器尚不统一的svg，到如今规范统一的canvas、svg为代表的html5技术，表现点、线、面要素的技术已经越来越规范成熟。我把前端数据可视化分为了五种：

图表
图谱
地图
关系图
立体图

我将按照顺序介绍62款前端可视化插件，下面就分享下34款图表插件

amcharts
url： http://www.amcharts.com/
browser：IE6+、chrome、safari、firefox、opear
resume：amCharts是一种先进的图表库,将适合任何数据可视化的需要。图表解决方案包括柱、栏、线、区域,一步,一步没有冒口,平滑线,烛台,OHLC,馅饼/甜甜圈,雷达/极地,XY /分散/泡沫,子弹,漏斗/金字塔图以及指标。
awesomechartjs
url：http://cyberpython.github.io/AwesomeChartJS/
github：https://github.com/cyberpython/AwesomeChartJS
browser：现代浏览器
resume：AwesomeChartJS是一个简单的Javascript库,可用于创建图表基于HTML 5画布元素。
axiis
url：http://www.axiis.org/
browser：官方未说明
resume：Axiis框架是一个开源的数据可视化为初学者和专家开发人员设计的。
bonsaijs
url：http://bonsaijs.org/
github：https://github.com/uxebu/bonsai
browser：IE9+、chrome20+、safari5+、firefox18+、opear12+
resume：用于创建图形和动画的js库
canvasjs
url：http://canvasjs.com
browser：官方未说明
resume：一个使用HTML5、JavaScript创建图表在画布上，图表包括几个好看的主题和10倍的速度比传统的基于Flash / SVG库——导致轻量级的,美丽的和响应指示板。收费
canvasxpress
url：http://canvasxpress.org/
browser：Firefox 1.5+, Opera 9+, Safari 3.x+, Chrome 1.0+, IE 6+
resume：CanvasXpress是一个独立的Javascript编写的图形库，支持所有主流浏览器中计算机和移动设备。
chartist
url：http://gionkunz.github.io/chartist-js/
github：https://github.com/gionkunz/chartist-js
browser：Firefox, Chrome, Safari, Opera, IE9+
resume：绘制多种图形的库
chartjs
url：http://www.chartjs.org/
github：https://github.com/nnnick/Chart.js
browser：IE9+、chrome、safari、firefox、opear、部分支持IE7/8
resume：chartjs是一个可以绘制多种图表的库，使用了html5的canvas技术
chartkick
url：http://ankane.github.io/chartkick/
github：https://github.com/ankane/chartkick
browser：IE6+、chrome、safari、firefox、opear
resume：chartkick是一个依赖于ruby的绘制图表的js库，在Python中也可以使用
DataWrapper
url：https://datawrapper.de/
github：https://github.com/datawrapper/datawrapper
browser：支持大部分浏览器
resume：Datawrapper完全免费，开源。您可以使用他们的免费主机服务，或者安装在您自己的服务器上。Datawrapper用PHP编写，非常易于安装、修改和拓展。可以绘制。但是DataWrapper是生成图表后嵌入到站点的。
dataset
url：http://misoproject.com/dataset/
github：https://github.com/misoproject/dataset
browser：官方未说明
resume：dataset是一个JavaScript客户端数据转换和管理库。数据集管理客户端数据简单处理加载、解析、排序、查询和操纵来自各种数据源的数据。
dc
url：http://dc-js.github.io/dc.js/
github：https://github.com/dc-js/dc.js
browser：官方未说明
resume：专门为探索大型、多维数据集而进行优化的库
dygraphs
url：http://dygraphs.com/
browser：IE8+、chrome、safari、firefox、opear
resume：dygraphs是一种快速、灵活的开源JavaScript库图表。
echart
url：http://echarts.baidu.com/index.html
github：https://github.com/ecomfe/echarts
browser：IE9+、chrome、safari、firefox、opear
resume：基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
flotr2
url：http://www.humblesoftware.com/flotr2/
github：https://github.com/HumbleSoftware/Flotr2
browser：FF, Chrome, IE6+, Android, iOS
resume：Flotr2是HTML5画图表和图形库。可以绘制线图、条图、蜡状图、饼图、气泡图
Flot
url：http://www.flotcharts.org/
browser：Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+
resume：一个基于jQuery的绘图库，可以绘制折线、散点、条形、饼状图
fusioncharts
url：http://www.fusioncharts.com/
browser：IE6+、chrome、safari、firefox、opear
resume：一个专门用来绘制图表的库，可以绘制90多种图表，但是收费
graphael
url：http://g.raphaeljs.com/
browser：Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+
resume：可以绘制各种图表的插件，而且非常简单灵活
highchart
url：http://www.highcharts.com/
github：https://github.com/highslide-software/highcharts.com/
browser：支持各种设备，ie6+
resume：在高版本浏览器中使用SVG，而在旧版本IE（包括IE6及更新版本）中使用后备的VML。有自己的团队负责，但是只对非商业用途免费，可以绘制 line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types
humble Finance
url：http://www.humblesoftware.com/finance/index
browser：FireFox, Safari, Chromium, or IE6+
resume：HumbleFinance是一个HTML5数据可视化工具类似于Flash工具，完全是用JavaScript编写的工具使用原型和Flotr库。
ichartjs
url：http://www.ichartjs.com/
github：https://github.com/wanghetommy/ichartjs
browser：IE9+、chrome、safari、firefox、opear
resume：ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。
icharts
url：http://www.icharts.net/
browser：官方未说明
resume：iCharts免费版本提供了一些基本的交互式图表样式，如果更使用高级的样式，则需要购买高级版本。
JavaScript InfoVis Toolkit
url：http://philogb.github.io/jit/
github：https://github.com/philogb/jit
browser：官方未给出具体版本
resume：JavaScript InfoVis Toolkit可以动态绘制各种图形，提供了一些预设的样式可用于展示不同的数据
jqplot
url：http://www.jqplot.com/
browser：IE 7+, Firefox, Safari, and Opera
resume：基于jQuery的绘图插件，可以绘制折线、条形、散点、饼状图
jscharts
url：http://www.jscharts.com/
browser：Firefox 1.5 +，Chrome 10 +，Internet Explorer 8 +，Safari 3.1 +，Opera 9 +
resume：jscharts是一个基于JavaScript的图表生成器,需要很少或根本没有编码。jscharts绘制图表是一个简单和容易的任务,因为您只需要使用客户端脚本(即由web浏览器)。不需要额外的插件或服务器模块。就包括我们的脚本,准备你的图表数据XML、JSON或JavaScript数组和你的表已经准备好了!允许您创建图柱状图,饼图或简单的线条图。收费但是有免费版本。
kendo-ui
url：http://www.telerik.com/kendo-ui
github：https://github.com/telerik/kendo-ui-core
browser：现代浏览器
resume：http://www.cnblogs.com/xiyangbaixue/p/3951297.html
nvd3
url：http://nvd3.org/
github：https://github.com/novus/nvd3
browser：Chrome,Firefox, Opera, Safari and Internet Explorer 10
resume：d3图表库
pizza-pie-charts
url：http://zurb.com/playground/pizza-pie-charts
github：https://github.com/zurb/pizza
browser：官方未说明
resume：主要用来生成饼状图的库
protovis
url：http://mbostock.github.io/protovis/
github：https://github.com/mbostock/protovis
browser：现代浏览器
resume：Protovis组成自定义视图的数据用简单的标志如酒吧和点。与低级图形库,迅速成为可视化乏味,Protovis定义是通过编码数据的动态属性,允许继承,尺度和layoutsto简化施工。
Peity
url：http://benpickles.github.io/peity/
browser：Chrome, Firefox, IE9+, Opera, Safari
resume：可以绘制多种图形，但是都是很小的图形，与jQuery Sparklines相似
rgraph
url：http://www.rgraph.net/
browser：现代浏览器
resume：RGraph是一个基于HTML5的开放web图表和图表库。RGraph创建这些图表在web浏览器使用JavaScript,这意味着更快的页面和web服务器负载,导致较小的页面大小和更快的网站。
webfx
url：http://webfx.eae.net/
browser：Firefox 1.5, Opera 9 and Internet Explorer 6
resume：支持多种图表的库
xcharts
url：http://tenxer.github.io/xcharts/
github：https://github.com/tenXer/xcharts/
browser：现代浏览器
resume：xCharts美丽是一个JavaScript库,用于构建和自定义数据驱动的web使用D3.js图表可视化。使用HTML、CSS和SVG,xCharts被设计成动态、流体、集成和定制。
zingchart
url：http://www.zingchart.com/
browser：官方未声明
resume：ZingChart创造惊人的可视化提供了灵活性和资源。提供超过100个图表类型，独特的特性,如缩放和交互式。

小结：

　　　　每款插件各有千秋，根据项目需求挑选不同插件。其中比较广泛使用的如echart(百度产品)、highchart等，后面我将分享图谱插件。

前端数据可视化插件（一）图表相关推荐

前端数据可视化可绘制地图等插件:Highcharts、Echarts和D3
前端数据可视化插件有很多,但我用过的只有Highcharts(https://www.hcharts.cn/).Echarts(http://echarts.baidu.com/)和D3(https: ...
用最科学的方法展示最形象的图表——前端数据可视化实践
前言也许很多人都会觉得奇怪,在这样一个更多以后台数据分析为主的公司,为什么需要一个专注于前端的团队?今天这篇文章就来讲述那些年我们错过的前端数据可视化,以此来解答这个问题. 需求那么,在我们的项目 ...
数据可视化：常用图表使用总结
文章对常见的数据可视化图表进行了简单的汇总分析,希望对你有益. 什么是数据可视化? 数据可视化,简简单单就是把数据展示出来吗?非也非也,其终极是为了满足用户对数据的价值期望,利用数据,借助可视化工具, ...
数据可视化怎么选择图表
数据可视化具体来说就是图表的设计,我们在做图表设计时候经常面临着怎么选用合适的图表,Andrew Abela 整理了图表类型选择指南: Andrew Abela将图表展示的关系分为4 类:比较.分布. ...
FlyFish｜前端数据可视化开发避坑指南（二）
FlyFish是云智慧开源的一款数据可视化编排平台.通过配置数据模型为用户提供上百种可视化图形组件,零编码即可实现符合自己业务需求的炫酷可视化大屏. 同时,FlyFish也提供了灵活的拓展能力,支持组 ...
vue移动端用什么数据可视化插件_前端必看的数据可视化入门指南
作者:董晓庆蚂蚁金服体验技术部这是一篇给大家提供数据可视化开发的入门指南,介绍了可视化要解决的问题和可以直接使用的工具,我将从下面几个方面给大家介绍,同时以阿里/蚂蚁的可视化团队和资源举例说明: ...
vue移动端用什么数据可视化插件_vue-cli+v-charts实现移动端可视化图表
v-charts是饿了么团队开源的一款基于Vue和Echarts的图表工具,在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个 ...
大数据可视化大屏图表设计经验，教给你
前言自从跟大家分享第一篇<大数据可视化大屏设计经验,教给你!>,很多小伙伴都会问我一些相关的问题,看了小伙伴给我发的视觉稿,整体都还不错,但是发现图表的设计都有一些问题,大家可能对 ...
ECharts 数据可视化插件
ECharts ECharts是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox, ...
python数据可视化--pyecharts生成图表
[python可视化系列]python数据可视化利器--pyecharts echarts官网一.前言 echarts是什么?下面是来自官方的介绍: ECharts,缩写来自Enterprise C ...

前端数据可视化插件（一）图表

小结：

前端数据可视化插件（一）图表相关推荐

最新文章

热门文章