现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件。我之前给一家网站做过复杂的图形,我们用的是 highchart。在那段时间,没有很多可供选择的插件。但现在不同了,很容易就可以找到很多功能非常不错的图表库。个人而言,此类插件的上升,是因为:

1. Flash 过去是最佳解决方案,但很多人多在从那迁移;

2. 现代浏览器及其更强大的计算能力,使其在转化绘制实时数据方面的能力更佳;

3. 绘制矢量图的不同技术愈发成熟:VML、SVG 和 Canvas。

当然了,你需要仔细选择,以符合自身需求。正如前面提到的,正因使用了各种技术,因此一些支持Canvas的插件仅需要一个现代浏览器。

在这篇文章中,我们已收集 13 个JavaScript图表和图形绘制插件。少数是独立的框架,大多数支持条图、线图、饼图等基本图形,很多甚至支持更加复杂的图形,比如:维恩图、热图、进化树、二维散点图、二维散点气泡图、三维散点图等。相信你应当能在这个列表中找到所需的。

1. Flotr2

Flotr2 是个独立框架库,支持HTML5图表和图形。它是 flotr 的一个分支版本,移除了 Prototype 依赖性,并且有很多改进。支持:线图、条图、蜡状图、饼图、气泡图。诸如 IE6 类的老浏览器也支持。

2. Rickshaw

Rickshaw 是个用于创建交互式时序图的JS工具。它依赖 D3 可视化库和其他一些 jQuery 和 jQuery UI 的插件。

3. D3

D3 是一款著名且高效的可视化库。

4. Awesome Chart JS

AwesomeChartJS 是个简洁的JS库,用于基于HTML5画布元素的图表。

5. canvasXpress

CanvasXpress is a javascript library based on the tag implemented in HTML5. I developed this library as the core visualization component for our BMS systems biology platform. It supports crazy amount of highly complicated charts and graphs.

6. Humble Finance

HumbleFinance is an HTML5 data visualization tool written as a demonstration of interactive graphing in HTML5. It is similar to the Flash tool on http://finance.google.com/. The tool itself is written entirely in JavaScript, using the Prototype and Flotr libraries. It can be used to display any two 2-D data sets of real numerical data which share an axis.

7. RGraph

RGraph is a HTML5 Javascript charts library that supports over 20 different types of charts. Using the new HTML5 canvas tag, RGraph creates these Javascript charts in the web browser, meaning quicker pages and less web server load. Using RGraph is an easy way of speeding up your website.

8. dygraphs

dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them. This is a lightweight solution and works in Internet explorer too.

9. HighChart

Highcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types. A famous chart/graph solution used by many well-known organization such as IBM, NASA, Siemens, HP etc.

10. gRaphael

gRaphaël’s goal is to help you create stunning charts on your website. It is based on Raphaël graphics library. Check out the demos to see static and interactive charts in action. gRaphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.

11. jqPlot

jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features.

12. JS Charts

JS Charts is a JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. Just include our scripts, prepare chart data in XML, JSON or JavaScript Array and your chart is ready!

13. JSXGraph

JSXGraph is a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser. It is implemented completely in JavaScript, does not rely on any other library, and uses SVG, VML, or canvas. JSXGraph is easy to embed and has a small footprint: less than 100 KByte if embedded in a web page. No plug-ins are required! Special care has been taken to optimize the performance.

原文:Kevin Liew   编译:伯乐在线 – 黄利民

13个JavaScript图表(JS图表)图形绘制插件【转】的更多相关文章

  1. 13个JavaScript图表(JS图表)图形绘制插件

    转自:http://blog.jobbole.com/13671/ 1. Flash 过去是最佳解决方案,但很多人多在从那迁移: 2. 现代浏览器及其更强大的计算能力,使其在转化绘制实时数据方面的能力 ...

  2. 【转】13个JavaScript图表(JS图表)图形绘制插件

    现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...

  3. SVG.js 基础图形绘制整理(二)

    一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

  4. SVG.js 基础图形绘制整理(一)

    一.矩形 //指定width和height 画矩形 //返回rect对象 var draw = SVG('svg1').size(300, 300); var rect = draw.rect(100 ...

  5. 转-——推荐几个web中常用的一些js图表插件 - zccst

    http://www.tuicool.com/articles/bqq2Qn 作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph f ...

  6. 推荐几个web中常用js图表插件

    作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph flot js charts jqchart elycharts jquery ...

  7. 免费而优秀的图表JS插件

    1.百度的Echart ECharts,缩写来自Enterprise Charts,是百度推出的一款开源的,商业级数据图表,它最初是为了满足百度公司商业体系里各种业务系统(如凤巢.广告管家等等)的报表 ...

  8. 推荐12个最好的 JavaScript 图形绘制库

    众多周知,图形和图表要比文本更具表现力和说服力.图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web  ...

  9. 转:几款免费的图表js插件

    1,ichartjs(国产)(http://www.ichartjs.com/)  ===============强烈推荐ichartjs是一款优秀的国产开源插件,作者是王鹤,英文名taylor,毕业 ...

随机推荐

  1. JavaScript中的原型和对象机制

    1.对象相关的一些语言特性 JavaScript里所有的东西都是对象, 对象是属性的集合.要知道,函数也是对象, 能够作为变量的值. 返回值. 参数或者属性的值. 函数对象特殊的地方是能通过" ...

  2. 项目部署到tomcat Root中后导致 WebApplicationContext 初始化两次的解决方法

    上一篇文章刚说项目部署到tomcat的ROOT中,今天就发现一个问题.通过eclipse启动tomcat时候,WebApplicationContext 初始化两次: 现象:   通过eclipse控 ...

  3. ajax向后台传递数组

    $.ajax({ traditional: true//这个设置为true,data:{"steps":["qwe","asd"," ...

  4. Guava------------Cache使用方法

    简单从这几个方面描述一下如何使用Cache,对Cache的各种原理介绍此处不涉及. 1.使用场景 2.如何使用Cache 3.创建方式 4. 如何和Spring搭配使用 +-------------- ...

  5. 关于tomcat内路径跳转的一些思考

    初学jsp+servlet时经常碰上的几个错误:404.路径正确但页面没有任何内容.样式和图片丢失. 这几个错误曾经让我在debug时头大,现在总结一下,其实它们都跟路径有关,正是因为没有处理好路径跳 ...

  6. HTML 表单和输入<textarea><label><fieldset><legend><select><optgroup><option><button>

    textarea><label><fieldset><legend><select><optgroup><option>& ...

  7. VS2010开发AutoCAD 2012 .net应用程序调试时断点不起作用

    VS2010+ AutoCAD 2012开发调试过程中,发现普通的Class里面的断点是可以跟踪到的,可能是创建自定义的Form做界面是,Form1.cs中的代码断点却不管用.原因在于AutoCAD的 ...

  8. cacti web页面访问 settings出错

    查看apache错误日志: 错误信息Mon Dec 26 11:00:48.241653 2016] [:error] [pid 32607] [client 192.168.10.79:65009] ...

  9. JavaWeb chapter10 JavaWeb开发模式

    1.  开发模式 (1)开发模式1:JSP+JavaBean (2)开发模式2:Servlet+JSP+JavaBean (MVC) 2.JavaBean 本质上是一个普通的Java类:需要遵循一定的 ...

  10. bzoj4213: 贪吃蛇

    题意:给定一个网格,有一些格子是障碍不用管,剩余的是空地,你要用一些起点和终点在边界上的路径或环来完全覆盖掉空地,如果使用第一种,会付出1的代价,求最小代价,不能覆盖则输出-1. 现在看到网格而且数据 ...