向 Web 开发人员推荐35款 JavaScript 图形图表库

From: http://www.cnblogs.com/lhb25/p/35-javascript-chart-and-graph-libraries.html 

图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web 应用和项目的可靠性。

  在这篇文章中,我们收集了35款值得网站开发者收藏的 JavaScript 图形图表库,适合各种图表需求。其中大部分都是免费而且开源的,希望大家能在下面的列表中找到适合自己需求的 JavaScript 图表和图形库。

您可能感兴趣的相关文章
  • 2013年最受欢迎的10篇前端开发博文
  • 小伙伴们惊呆了!8个超炫的 Web 效果
  • 35个让人惊讶的 CSS3 动画效果演示
  • 8个惊艳的 HTML5 和 JavaScript 特效
  • 2014年最值得关注的网页设计流行趋势

  

1. JS Charts

jscharts

JS Charts 是个基于 JavaScript 的图表生成器,不需要任何编码。JS Charts 非常容易使用,只要用户使用客户端脚本(比如,在 web 浏览器中执行)。它不需要多余的插件和服务器模块,只需要下载 JS Charts 的脚本,准备好 XML,JSON 或者 JavaScript 数组数据。

  

2. Canvasjs

canvasjs

CanvasJS 是个易用的 HTML5 & JavaScript 图表库,基于 Canvas 元素。Graphs 可以通过设备渲染,包括 iPhone,iPad,Android,Windows Phone,Microsoft Surface,Desktops 等等。它允许用户创建适用于所有设备,不影响 web 应用程序的功能和可维护性的富仪表盘。CanvcasJS 有着非常漂亮的主题和超过传统的 Flash 和 SVG 图表 10x 倍以上的速度——生成轻量级,漂亮和响应式的仪表图。

 

3. Chart.js

chartjs

Chart.js 是个简单的,面向对象的客户端图形库,用户可以用 6 中不同的方式来可视化数据。每个方式都是动画效果的,完全自定义,而且看起来非常好看,即使在 retina 显示。它使用 HTML5 canvas 元素,支持所有现代浏览器,并且支持  IE7/8。

  

4. Aristochart

aristochart

Aristochart 是个高度自定义,灵活的折线 Canvas 图表库,允许用户集中精力在图表的审美方面,后台工作做得非常好。Aristochart 有个持续进步的社区,提供许多不断增长的主题给用户选择。

  

5. xCharts

xCharts

xCharts 是一个使用 D3.js 来构建漂亮的可定制的数据驱动的 JavaScript 图表库,他使用HTML,CSS,SVG实现图表,xCharts 被设计为一个动态的、流畅的、开放的和可定制化的库。

  

6. BonsaiJS

graphic-library

BonsaiJS 是个轻量级的 JavaScript 图形库,提供直观的图形 API 和 SVG 渲染器。主要特性包括:架构分离的运行器和渲染器;iFrame,Worker 和 Node 运行上下文;形状,路径,Assets(音频,图像,字体,subMovies),Keyframe 和常规动画,等等。支持现代化浏览器: Safari, Chrome 和 Firefox。

  

7. Sigma.js

sigmajs

Sigma.js 是个免费开源的 JavaScript 图形库,使用 HTML5 canvas 元素。它的设计是特别为了在 web 界面分享交互式网络 Map 和动态展示网络数据库。

  

8. Morris.js

morrisjs

Morris.js 是个轻量级的 JavaScript 库,使用 jQuery 和 Rapha&enuml 来绘制时序图。 Morris.js 生命周期是从代码驱动 howmanyleft.co.uk 图表开始的。它支持的浏览器有:  IE6+, Safari/Chrome/Firefox, iOS 3+ 和 Android 3+。它的公共 API 非常的小,只有一个函数: Morris.Line(选项),包括了许多配置选项。

  

9. Paper.js

paperjs

Paper.js 是一个开源的向量图形脚本框架,基于 HTML5 Canvas 开发。提供清晰的场景图、DOM和大量强大的功能用来创建各种向量图和贝塞尔曲线。

  

10. AmCharts

Amcharts

AmCharts 是个高级图表库,适用于所有数据的可视化。AmCharts 包括: Column, Bar, Line, Area, Step, Step without risers, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/ Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid 等等。

  

11. Smoothie Charts

smoothiecharts

Smoothie Charts 是个极小的图表库,专为实时流媒体数据设计的。Joe Walnes 想展示 WebSocket 推动的实时的流数据。虽然很多图表库允许用户动态更新数据,但是没有一个是可以优化源源不断的流数据。

  

12. Dygraphs

dygraphs

Dygraphs 是个快速,灵活,开源的 JavaScript 图表库。它允许用户展示和解析密集的数据集。可以高亮需要强调的数据集。可以使用鼠标点击或者用鼠标拖动来缩放图表;可以修改数值或者点击条目来调整平均周期。

  

13. Grafico

Grafico

Grafico 是 Grafico 是一个基于 Raphaël 和 Prototype.js 构建的 JavaScript 图表库,提供了各种图表类型。这些漂亮的图表,有利于传递他们的信息。

  

14. Highchart JS

highchartjs

Highcharts JS 是一个制作图表的纯 Javascript 类库,主要特性如下:兼容性:兼容当今所有的浏览器,包括 iPhone、IE 和火狐等等;对个人用户完全免 费;纯JS,无BS;支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;跨语言:不管是 PHP、Asp.net 还是 Java 都可以使用。

  

15. Flotr

flotr

Flotr 是一个基于 Prototype 开发的 JavaScript 绘图工具。支持图例,鼠标跟踪,图片区域选择,图片缩放,添加事件钩子(event hook),通过CSS设置样式等。

  

16. Flot

flot

Flot 是受 Plotr 和 PlotKit 的 启发,Ole Laursen 基于 jquery 开发了一个图表绘制(WEB Chart)插件并命名为 flot。 flot 是个纯 JavaSript 库,专注于简单的使用方式,迷人的外观和交互式特性。支持的浏览器有: Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。

  

17. jFreeChart

JFreeChart

JFreeChart  主要用来各种各样的图表,这些图表包括:饼图、柱状图(普通柱状图以及堆栈柱状图)、线图、区域图、分布图、混合图、甘特图以及一些仪表盘等等。JFreeChart 项目历史悠久,而且有大量的开发者在维护。

  

18. Plotkit

PlotKit

PlotKit 是一个纯 JavaScript 绘图工具包。它支持 HTML Canvas 和 Adobe SVG。有着很完整的文档,方便用户使用。

  

19. Planetary.js

planetaryjs

Planetary.js 是个令人称奇的创建交互式 web 地球仪的 JavaScript 库。它使用 D3 和 TopoJSON 来解析和渲染地理信息。Planetary.js 使用基于插件的架构,甚至默认自身就是个插件!这使得 Planetary.js 非常灵活,而且它是允许用户完全自定义,包括颜色,大小,rotation 等等。更重要的是,用户可以在任意位置使用自定义的颜色和大小来显示动画“pings”;它还支持鼠标拖动和缩放,100% 免费和开源。

  

20. Ember Charts

ember-charts

Ember Charts 是个图表库,使用 Ember.js 和 d3.js 框架构建的。它包括时间线,条形图,饼图和散点图,非常容易扩展和修改。这些图表组件都是开箱即用的,在图表交互和演示方面应用的很好。

  

21. Sparky

Sparky

Sparky 是个免费的 JavaScript 波形图库,依赖于 Raphaël ,非常容易使用。支持多个图表类型(折线,条形,area),折线和区域图可以有多个颜色选择。

  

22. Envision.js

envision

Envision.js 是个 JavaScript 库,用来简化,快速创建交互式的 HTML5 可视化图表。它包括两个图表类型:时序图和 Finance ,提供 API 给开发者,用户可以直接自定义创建图表。这个库氏基于 Flotr2 和 HTML5 Canvas 的。它与框架无关,依赖于几个小的 JavaScript 库。

  

23. Dc.js

dcjs

dc.js 是个 JavaScript 图表库,有着原生的 crossfilter, 支持和允许高效展示大型多维数据集(基于 crossfilter 的示例);图表使用 dc.js 渲染,是使用原生数据驱动,所以能得到用户的实时反馈;dc.js 最大的亮点在于能提供一个简单而强大的 JavaScript 库,能进行数据可视化和分析;不仅支持桌面浏览器还支持移动端。

  

24. ElyCharts

Elycharts

Elycharts 是一个易于使用的,可定制的 JavaScript 图表绘制组件。这个组件可用于绘制大部分常用的图表类型包括:line, column, are, bar, pie, sparklines and combinations。它支持多种交互式功能包括:鼠标跟踪、事件处理、利用各种动画高亮显示选择中的区域,Tooltip,HTML锚点等。可以动 态修改数据,并以漂亮的动画效果展示图表中的变化。图表利用SVG/VML技术生成,基于jQuery + Raphaël开发。

  

25. AwesomeChartJS

AwesomeChartJS

AwesomeChartJS Awesome Chart JS 是一个 JavaScript 生成图表的类库,它利用了 HTML5 的 canvas 标签来创建统计图表。此类库就是为了减轻开发者的工作量,使用它只需书写几行代码便能生成漂亮的图表。

  

26. Arbor.js

arborjs

Arbor.js 是一个利用 Web Works 和 jQuery 创建的可视化图形库,它为图形组织和屏幕刷新处理提供了一个高效的、力导向的布局算法。

  

27. CanvasXpress

CanvasXpress

canvasXpress 是一个基于HTML5 canvas标签实现的 JavaScript 图表类库,它能够支持线性图、柱形图、饼图和热点图等多种常见的图表类型。它所生成的图表交互性很强,鼠标放 上去时会动态显示值。除此之外,它也具有相当高的可定制性,可设置图表的文字、颜色和要显示/隐藏的元素等。当然更重要的一点是,虽然它使用了 HTML5,但是依然支持IE6浏览器。

  

28. JSXGraph

JSXGraph

JSXGraph 是一个支持各种浏览器的交互式几何图库绘制。JSXGraph 使用 SVG 和 VML。

  

29. Rickshaw

rickshaw

Rickshaw 是一个用于绘制时序图的简单 jS 库,基于 Mike Bostock’s delightful D3 库构建。

  

30. rGraph

rGraph

RGraph 是基于HTML5 canvas标签的HTML5 canvas图形库,支持 20 种不同的可视化类型。使用 canvas 标签,RGraph 创建“HTML5 图表”,意味着更快的 web 页面加载和更少的 web 服务器加载。这能帮助减小 web 页面的大小,低能耗和更快的浏览速度。

  

31. Fusion Chart

FusionCharts

FusionCharts Suite XT 是个专业的 JavaScript 图表库,能创建任何类型的图表。它创建的图表都是可以进行完全自定义的,标签,字体,边界等等,都可以进行修改。它有很强的交互功能,有许多信息提示,可 点击的 legend 关键字,还有 dril-down,缩放/滚动 和单击打印图表功能。

  

32. Graph Dracula

graphdracula

Dracula 是用一系列的工具来显示和布局互动图表,包括各种相关的算法。它只是纯 JavaScript 和 SVG ,并无 Flash,Java,其他插件。它非常容易使用,用户可以很简单的自定义任意的元素。

  

33. Bluff

Bluff

Bluff 是个 JavaScript 的 Ruby 的 Gruff graphing library 端口。它支持所有 Gruff 的特性,但是有着最小的依赖。用户只需要运行一个第三方脚本: JS.Class 副本(压缩后只有 2.6kB ) 和 Google 的 ExCanvas 副本,用来支持 IE 中的 canvas。这两个脚本在 Bluff 中都有下载。Bluff 自身压缩后大小大概有 11KB 。

  

34. Pizza Pie Chart

pizza-pie-charts

Pizza Pie Charts 是个响应式饼图图表,基于 Adobe Snap SVG 框架,通过 HTML 标记和 CSS 来替代 JavaScript 对象,更容易集成各种先进的技术。

  

35. jGraph

jgraph

HTML5 图表组件,完全支持l IE 6-8 和触屏设备。 JGraph 自2001年来就一直提供最先进的图表软件组件,是第一个流行的 JGraph Swing 库。然后在 2005 年走在时代的前沿开发 mxGraph。

 

您可能感兴趣的相关文章
  • 期待已久的2013年度最佳 jQuery 插件揭晓
  • 小伙伴们都惊呆了!8个超炫的 Web 效果
  • 10大流行的 Metro UI 风格 Bootstrap 主题
  • 推荐35款精致的 CSS3 和 HTML5 网页模板
  • 精选12款优秀 jQuery Ajax 分页插件和教程

 

英文链接:35 JavaScript Chart and Graph Libraries

译文链接:35款值得网站开发者收藏的 JavaScript 图形图表库

推荐博文

  • Web 前端工程师和设计师必读精华文章推荐
  • 酷!15个精美的 HTML5 单页网站作品欣赏
  • 炫!35个让人惊讶的 CSS3 动画效果演示
  • 赞!30个与众不同的优秀视差滚动效果网站
  • 靓!25个优秀的国外单页网站设计作品欣赏
  • 帅!8个惊艳的 HTML5 和 JavaScript 特效
  • 顶!35个很漂亮的国外 Flash 网站作品欣赏
  • 哇!34个漂亮网站和应用程序后台管理界面
Web 开发中很实用的10个效果【源码下载】


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/403232.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决列表某项文字过度过多 需要自适应撑开高度展示 其他项目按照行高居中

解决列表某项文字过度过多 需要自适应撑开高度展示 其他项目按照行高居中 以下代码可直接复制&#xff1a; 两种方法&#xff1a;分别是方法1&#xff1a;bfc配合浮动撑高 其他项目子绝父相 方法二&#xff1a;第一项也是相对定位&#xff08;不推荐&#xff09; <templat…

uni-app更新某个组件版本;uni-app更新插件版本;uni-app更新uni_modules插件;uni-app小程序更新某一个组件的版本库

uni-app官方介绍的更新某一个组件的uni_modules方法 注意&#xff1a;本篇只是记录更新uni-app的组件库下某一个组件的版本。不是更新微信小程序版本。 场景原因&#xff1a;项目最初是去年开发的&#xff0c;当时下载了uni-app的自带组件库。但是时间筛选器uni-datetime-picke…

课文《小站》

小站 --作者&#xff1a;袁鹰 这是一个铁路线上的小站&#xff0c;只有慢车才停两三分钟。快车疾驰而过&#xff0c;旅客们甚至连站名还来不及看清楚。 就在这一刹那&#xff0c;你也许看到一间红瓦灰墙的小屋&#xff0c;一排漆成白色的小栅栏&#xff0c;或者还有三五个人影…

wordpress在新窗口打开留言者链接

为什么80%的码农都做不了架构师&#xff1f;>>> 没有什么技术含量可言&#xff0c;网上早有高手支招&#xff0c;但其方法在我现在使用的inove主题下不行&#xff0c;于是自己研究了下代码&#xff0c;完美解决&#xff0c;分享一下&#xff1a; 一般主题都可以这…

vue上传图片加水印;js上传图片添加水印;vue给图片添加水印;canvas图片添加水印;canvas画布导出图片

uni-app微信小程序图片加水印&#xff0c;点击看这篇 需求场景&#xff1a; 要求上传图片&#xff0c;并给图片添加水印。传给后端的也是有水印的图片。 逻辑步骤&#xff1a; 通过input上传图片&#xff0c;拿到图片的信息和base64&#xff0c;将图片绘制到画布上&#xff0c;…

The path is not a valid path to the xx-generic kernel headers

如果在安装 VMware Tools 的过程中弹出该选项&#xff0c;按照以下步骤进行操作&#xff1a; 1. 检查系统内是否已经安装好相应的 kernel headers&#xff0c;比如我的系统&#xff1a; 如果没有该目录的话&#xff0c;那么需要安装以下资源&#xff1a; sudo apt-get instal…

库-libuv:概述

From&#xff1a; http://blog.chinaunix.net/uid-28458801-id-4464173.html libuv 是 Node 的新跨平台抽象层&#xff0c;用于抽象 Windows 的 IOCP 及 Unix 的 libev。作者打算在这个库的包含所有平台的差异性。特性&#xff1a;非阻塞 TCP 套接字非阻塞命名管道UDP定时器子进…

input上传图片;input上传file;vue上传图片。js读取文件的base64;通过File文件读取base64;

本篇是通过File文件来获取base64的&#xff1b;如果需要 通过文件url获取base64看这篇 需求&#xff1a;上传图片并获取base&#xff0c;用的是input file功能上传 注意点&#xff1a;input上传相同文件不触发的原因。需要将inputDOM.value null (不过置空后 29行的打印 就看不…

C#WinForm WebBrowser (二) 实用方法总结

实用方法1&#xff1a;获取状态栏信息 void webBrowser1_StatusTextChanged(object sender, EventArgs e){ label1.Text webBrowser1.StatusText;} 实用方法2&#xff1a;页面跳转后改变地址栏地址//在Navigated事件处理函数中改变地址栏地址是最恰当的&#xff1a;private…

虚拟机找不到/mnt/hgfs挂载目录

如果在安装好 VMware Tools 并在设置里面设定好共享目录之后仍然找不到 /mnt/hgfs 默认挂载目录&#xff0c;那么尝试以下步骤&#xff1a;1. 确认VMware Tools 和共享目录设定已经完成&#xff1a;2. 如果操作结果如上所示&#xff0c;那么表示前提条件准备充足啦&#xff0c;…

pdf上传及预览;file上传pdf文件及预览;vue上传pdf文件及预览;vue-pdf预览pdf文件

需求&#xff1a;上传pdf文件&#xff0c;并点击可以打开预览。使用input的file功能即可完成&#xff0c;预览只需要跳转到pdf的url地址即可。 1.使用iframe直接预览 2.vue-pdf参考 3.vue-pdf报错解决 以下代码可直接复制使用&#xff01;&#xff01;&#xff01;有效的可以点…

JS遍历对象或者数组

From: http://keshion.iteye.com/blog/728122 一.纯js实现 Js代码 <script> var obj {"player_id":"GS001","event_id":"1","destroy":"97%"}; var props ""; for(var p in obj){…

深入了解SEO

为什么要SEO&#xff0c;SEO的作用是什么&#xff1f;SEO&#xff08;Search Engine Optimization&#xff09;是为了让自己的IT产品优先能被搜索引擎找到&#xff0c;通过搜索引擎搜索推荐给网民浏览&#xff08;特点就是精准找到用户群体&#xff09;。正所谓&#xff0c;有用…

el-table表格fixed=“right“后表格错乱;Safari浏览器el-table表格错乱;Safari浏览器样式需改无效;

场景&#xff1a;el-table表格操作列右固定fixed“right”&#xff0c;导致表格错乱。其实是由于某行的字体太多&#xff0c;所导致操作列高度错乱。 至于Safari浏览器样式修改无效的问题&#xff1a;每次修改代码后&#xff0c;Safari浏览器项目刷新无变化&#xff0c;必须每次…

从零开始学习Node.js例子七 发送HTTP客户端请求并显示响应结果

From: http://www.cnblogs.com/EricaMIN1987_IT/p/3654233.html wget.js&#xff1a;发送HTTP客户端请求并显示响应的各种结果 options对象描述了将要发出的请求。 data事件在数据到达时被触发&#xff0c;error事件在发生错误时被触发。 HTTP请求中的数据格式通过MIME协议来声…

el-select 结合 el-checkBox 实现下拉全选+多选功能;el-select下拉框全选功能;

原文链接 el-select选择框也有多选功能&#xff0c;但是没有全选。故需要改造一下&#xff0c;el-select 结合 el-checkBox 实现下拉全选多选功能。 代码如下&#xff0c;可直接复制使用&#xff1a; <!--* Description: el-select 结合 el-checkBox 实现下拉全选多选功能 …

JS类似Java String.format的函数

From: http://chenzenghua.iteye.com/blog/1770791Js代码 String.prototype.format String.prototype.f function () { var s this, i arguments.length; while (i--) { s s.replace(new RegExp(\\{ i \\}, gm), arguments[i]); …

pointer-events: none;属性。pointer-events: none;看得见摸不着,点击穿透。

pointer-events: none;理解&#xff1a;你可以看的到某个元素&#xff0c;但是你无法摸的着&#xff0c;点击不到&#xff0c;点击会穿透触发到下层的元素 display&#xff1a;none; 是你摸不着&#xff0c;但是你也看不见。 最简单的使用场景是&#xff1a;给某个box1盒子设置…

axios上传文件;el-upload上传图片和post接口上传file文件;前端给后端接口上传file文件。通过formData给接口传递file文件

本文使用element-ui的el-upload图片上传功能。上传链接 接口参数&#xff1a; <el-uploadaction"https://jsonplaceholder.typicode.com/posts/"list-type"picture-card":on-success"handleAvatarSuccess":on-preview"handlePictureCar…

2、Eternal框架-svn_有更新!

2019独角兽企业重金招聘Python工程师标准>>> 我在code.google.com上建立了eternal项目。 下载地址为&#xff1a;http://code.google.com/p/eternal-mvc/downloads/list 包含了示例war包和源代码。 转载于:https://my.oschina.net/eternal/blog/100233