一款好的圖表插件不是那么容易找到的。最近項目里需要實現統計圖表功能，所以在網上搜羅了一圈，找到一些不錯的圖表插件，分享大家。眾多周知，圖形和圖表要比文本更具表現力和說服力。這里給大家精心推薦幾款實用的 JavaScript 圖形圖表庫，可以幫助你實現各種功能的圖表。
Flotr2
Humble software 團隊在可視化圖形應用程序方面已經有相當長的一段時間了，他們的 Flotr2 庫是最流行的圖形圖表庫之一，因為它提供了大量的預制的范例，對於初學者來說容易安裝和理解。
你也可以通過添加自己的圖形類型來擴展這個庫，甚至開發你自己的插件把它帶到一個新的水平。現在，它是專為 HTML5 Canvas 構建，能夠和移動設備的無縫集成。它支持 IE6+ 和所有的現代瀏覽器 。示例代碼：
(function basic(container) {
var
d1 = [[0, 3], [4, 8], [8, 5], [9, 13]], // First data series
d2 = [], // Second data series
i, graph;
// Generate first data set
for (i = 0; i < 14; i += 0.5) {
d2.push([i, Math.sin(i)]);
}
// Draw Graph
graph = Flotr.draw(container, [ d1, d2 ], {
xaxis: {
minorTickFreq: 4
},
grid: {
minorVerticalLines: true
}
});
})(document.getElementById("editor-render-0"));
Springy
Springy 是一個有向圖布局算法。這意味着，Springy 使用了一些真實世界的物理特性，試圖找出如何表現出網絡圖的方式，看起來不錯。它有一個相當容易使用的 API ，可以通過源代碼來感受一下。您還可以看看更先進的在線演示，用於連接形狀。
示例代碼：
// make a new graph
var graph = new Springy.Graph();
// make some nodes
var spruce = graph.newNode({label: 'Norway Spruce'});
var fir = graph.newNode({label: 'Sicilian Fir'});
// connect them with an edge
graph.newEdge(spruce, fir);
xCharts
xCharts 是一個基於 D3，用於構建精美，自定義數據驅動的 JavaScript 可視化圖表插件，通過結合 HTML，CSS 和 SVG 的優勢使得圖表的創建和集成難以置信的方便和有趣。
有了這個庫，你可以在幾分鍾內構建數據驅動的數據圖表。柱狀圖示例代碼：
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
}
]
}
]
};
var myChart = new xChart('bar', data, '#example2');
Rickshaw
Rickshaw 是一個用於創建交互式時間序列圖的 JavaScript 工具包，是另外一個基於 D3 的成功作品，試圖使創建圖形成為一件輕而易舉的事情。你可以很容易地從框架的底層操縱 D3，甚至SVG。我最的喜歡的是這個多重渲染演示，建議看下該頁面的源代碼，看看這一切是如何結合在一起的。示例代碼：
<!doctype html>
<script src="/vendor/d3.min.js"></script>
<script src="/vendor/d3.layout.min.js"></script>
<script src="/rickshaw.min.js"></script>
<div id="chart"></div>
<script>
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
width: 300,
height: 200,
series: [{
color: 'steelblue',
data: [
{ x: 0, y: 40 },
{ x: 1, y: 49 },
{ x: 2, y: 38 },
{ x: 3, y: 30 },
{ x: 4, y: 32 } ]
}]
});
graph.render();
</script>
Ico
ICO 是使用 Raphael 繪制圖形的 JavaScript 庫，這意味着它可以在多個瀏覽器（包括IE）中繪制圖形。你可以使用 ICO 創建各種類型的圖表。
Raphael 是一個用於在網頁中繪制矢量圖形的 Javascript 庫。它使用 SVG W3C 推薦標准和 VML 作為創建圖形的基礎，你可以通過 JavaScript 操作 DOM 來輕松創建出各種復雜的柱狀圖、餅圖、曲線圖等各種圖表，還可以繪制任意形狀的圖形，可以進行圖表或圖像的裁剪和旋轉等復雜操作。
示例代碼：
new Ico.LineGraph($('#linegraph'), {
one: [30, 5, 1, 10, 15, 18, 20, 25, 1],
two: [10, 9, 3, 30, 1, 10, 5, 33, 33],
three: [5, 4, 10, 1, 30, 11, 33, 12, 22]
}, {
markers: 'circle',
colours: { one: '#990000', two: '#009900', three: '#000099'},
labels: ['one', 'two', 'three', 'four',
'five', 'six', 'seven', 'eight', 'nine'],
meanline: true,
grid: true
}
);
Flot
Flot 是最流行的 jQuery 圖表庫之一，其特點是簡單的用法，有吸引力的外觀和交互功能。使用非常簡單，支持放大縮小以及鼠標追蹤等交互功能。目前支持的圖表類型有折線圖、圓餅圖、直條圖、分區圖、堆棧圖等，也支持實時更新圖表及 Ajax 更新圖表。示例代碼：
$(function() {
var d1 = [];
for (var i = 0; i < 14; i += 0.5) {
d1.push([i, Math.sin(i)]);
}
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
// A null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
$.plot("#placeholder", [d1, d2, d3]);
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});