你好,游客 登录 注册 搜索
背景:
阅读新闻

21个实用的Javascript数据图表插件

[日期:2016-05-31] 来源:简书  作者:神奇团子 [字体: ]

今天主要和大家分享一些统计图表相关的JS插件,图表通常用在网站后台界面,作为一种可视化数据形式展示,能让用户直观的查看统计信息,然而图表在WEB上实现是比较复杂的,特别有些要实现移动端显示,这样的前端代码编写难度较高,所以如果能使用一些图表库就方便多了。

在本文我们精选了21个优秀的Javascript数据图表插件,支持很多不同类型的图表库,而且多数是开源代码,可以免费使用,值得前端人员收藏。

<hr />

Chartist.Js

Chartist 是一个响应式图表库,支持桌面和移动平台使用,支持CSS动画,但兼容性需要在IE9以上,其它流行的浏览器一般都兼容了。 版权: 免费使用

<a href="http://gionkunz.github.io/chartist-js/" target="_blank">在线演示&下载</a>

ECharts

ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10/11,chrome,firefox,Safari等),底层依赖轻量级的Canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。

<a href="http://echarts.baidu.com/index.html" target="_blank">在线演示&下载</a>

FusionCharts

版权: 免费个人使用,商业用途需付费

<a href="http://www.fusioncharts.com/" target="_blank">在线演示&下载</a>

Dygraphs

要在IE8以上才能正常浏览 版权:免费使用

<a href="http://dygraphs.com/" target="_blank">在线演示&下载</a>

Chart.Js

Chart.js 是一个轻量的图表库,大小只有11KB,图表设计简约,速度快,如果用于一些小型数据展示,我想这个很适合。 版权: 免费使用

<a href="http://www.chartjs.org/" target="_blank">在线演示&下载</a>

Google Charts

<a href="https://developers.google.com/chart/" target="_blank">在线演示&下载</a>

Highcharts

版本:个人免费使用,商业用途需付费

<a href="http://www.highcharts.com/" target="_blank">在线演示&下载</a>

Flot

版权:免费使用

<a href="http://www.flotcharts.org/" target="_blank">在线演示&下载</a>

D3.Js

版权:免费使用

<a href="http://d3js.org/" target="_blank">在线演示&下载</a>

N3-Charts

版权:免费使用

<a href="http://n3-charts.github.io/line-chart/#/" target="_blank">在线演示&下载</a>

NVD3

版权:免费使用

<a href="http://nvd3.org/" target="_blank">在线演示&下载</a>

Ember Charts

版权:免费使用

<a href="http://addepar.github.io/#/ember-charts/overview" target="_blank">在线演示&下载</a>

JQuery Sparklines

版权:免费使用

<a href="http://omnipotent.net/jquery.sparkline/#s-about" target="_blank">在线演示&下载</a>

Sigma.Js

版权:免费使用

<a href="http://sigmajs.org/" target="_blank">在线演示&下载</a>

Morris.Js

版权:免费使用

<a href="http://morrisjs.github.io/morris.js/" target="_blank">在线演示&下载</a>

Cytoscape.Js

版权:免费使用

<a href="http://js.cytoscape.org/" target="_blank">在线演示&下载</a>

C3.Js

版权:免费使用

<a href="http://c3js.org/" target="_blank">在线演示&下载</a>

Rickshaw

版权:免费使用

<a href="https://github.com/shutterstock/rickshaw" target="_blank">在线演示&下载</a>

Cubism.Js

版权:免费使用

<a href="https://square.github.io/cubism/" target="_blank">在线演示&下载</a>

Plottable.Js

版权:免费使用

<a href="http://plottablejs.org/" target="_blank">在线演示&下载</a>

Canvas.Js

版权:免费个人使用,商业需付费

<a href="http://canvasjs.com/" target="_blank">在线演示&下载</a>

如果有更好的Javascript图表插件,欢迎在下方留言处分享给大家:)

原文出处:shejidaren.com/category/css/css-learn





收藏 推荐 打印 | 录入:elainebo | 阅读:
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款