一款好的图表插件不是那么容易找到的。最近项目里需要实现统计图表功能，所以在网上搜罗了一圈，找到一些不错的图表插件，分享大家。众多周知，图形和图表要比文本更具表现力和说服力。这里给大家精心推荐几款实用的 Javascript 图形图表库，可以帮助你实现各种功能的图表。
Humble software 团队在可视化图形应用程序方面已经有相当长的一段时间了，他们的 Flotr2 库是最流行的图形图表库之一，因为它提供了大量的预制的范例，对于初学者来说容易安装和理解。
你也可以通过添加自己的图形类型来扩展这个库，甚至开发你自己的插件把它带到一个新的水平。现在，它是专为 HTML5 Canvas 构建，能够和移动设备的无缝集成。它支持 IE6+ 和所有的现代浏览器 。示例代码：
| 12345678910111213141516171819202122 | (function basic(container) {vard1 = [[0, 3], [4, 8], [8, 5], [9, 13]], // First data seriesd2 = [], // Second data seriesi, graph;// Generate first data setfor (i = 0; i < 14; i += 0.5) {d2.push([i, Math.sin(i)]);}// Draw Graphgraph = Flotr.draw(container, [ d1, d2 ], {xaxis: {minorTickFreq: 4}, grid: {minorVerticalLines: true}});})(document.getElementById("editor-render-0")); |
插件下载 在线演示
Springy是一个有向图布局算法。这意味着，Springy 使用了一些真实世界的物理特性，试图找出如何表现出网络图的方式，看起来不错。它有一个相当容易使用的 API ，可以通过源代码来感受一下。您还可以看看更先进的在线演示，用于连接形状。
示例代码：
| 123456789 | // make a new graphvar graph = new Springy.Graph();// make some nodesvar spruce = graph.newNode({label: 'Norway Spruce'});var fir = graph.newNode({label: 'Sicilian Fir'});// connect them with an edgegraph.newEdge(spruce, fir); |
插件下载 在线演示
xCharts 是一个基于D3，用于构建精美，自定义数据驱动的 JavaScript 可视化图表插件，通过结合 HTML，CSS 和 SVG 的优势使得图表的创建和集成难以置信的方便和有趣。
有了这个库，你可以在几分钟内构建数据驱动的数据图表。柱状图示例代码：
| 123456789101112131415161718192021222324252627282930313233 | var data = {"xScale": "ordinal","yScale": "linear","main": [{"className": ".pizza","data": [{"x": "Pepperoni","y": 4},{"x": "Cheese","y": 8}]},{"className": ".pizza","data": [{"x": "Pepperoni","y": 6},{"x": "Cheese","y": 5}]}
|
