很多人是數(shù)據(jù)控，其中又有很多人是圖標(biāo)控，看到一個(gè)個(gè)設(shè)計(jì)精美的圖標(biāo)在網(wǎng)頁(yè)上騰挪移動(dòng)不知戳到了多少人的高潮點(diǎn)。今天，我們就來(lái)總結(jié)幾個(gè)好用的Chart libraries并隆重推薦C3.js（如果你已經(jīng)想到D3的話，說(shuō)明你懂的，么么噠）。對(duì)了，很多特殊目的的庫(kù)很多（例如專門做Sankey，專門做GeoInfo的），但今天我們主要講的C3則覆蓋大多數(shù)charts的庫(kù)。

這里是我使用過(guò)的幾個(gè)，而今天會(huì)突出講D3 & C3：

1. D3.js / C3.js
2. Chart.js
3. Google Chart Tools
4. HighChart
5. NVD3

D3.js

D3.js可以說(shuō)是數(shù)據(jù)可視化做的最完整最復(fù)雜而展示效果也最引人入勝的一個(gè)庫(kù)，諸多的研究機(jī)構(gòu)、數(shù)據(jù)機(jī)構(gòu)及開發(fā)者都很鐘情于它。但是如果你真正地試用這個(gè)庫(kù)，你會(huì)發(fā)現(xiàn)它并不是一個(gè)很簡(jiǎn)單的數(shù)據(jù)可視化工具，它更多地提供了一個(gè)數(shù)據(jù)化整理的結(jié)構(gòu)功能。另外，它并不是基于jQuery或其他的底層js libraries，它本身就帶有直接和DOM做交流的功能，因此一些教程說(shuō)其基于a, b, c, …都是錯(cuò)誤的。更好地了解它的價(jià)值，你也可以閱讀我好友寫的一篇文章：What D3.js is Not。

D3.js是基于SVG的，因此老瀏覽器在支持上是要思密達(dá)的，具體情況請(qǐng)看caniuse：

如果想要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的柱狀圖，可以通過(guò)數(shù)據(jù)直接生成DOM中的SVG元素，從而實(shí)現(xiàn)可視化的效果。因此，諸多D3.js樣式上的絢麗要?dú)w功于SVG本身的強(qiáng)大。

<pre lang="javascript" line="1"> 
 // dataset: an array of integers
 // svg: a <svg>...</svg>寬500, 高100 
 var svg = d3.select('#content').append('svg')
   .attr('width', 500) .attr('height', 100);
 // bars
 svg.selectAll('rect').data(dataset).enter().append('rect')
   .attr({
   x: function(d, i) {return i * (w / dataset.length);},
   y: function(d) {return h - d;},
   width: (w / dataset.length - barPadding),
   height: function(d) {return d;},
   fill: function(d) {return 'rgb(0,0,' + d * 3 + ')';}
 });
</pre>

這會(huì)生成一個(gè)簡(jiǎn)單的柱狀圖：

1. selectAll(‘rect’)：要選中此svg中所有的長(zhǎng)方體
2. data(dataset)：做binding
3. enter()：對(duì)每一個(gè)數(shù)據(jù)進(jìn)行操作
4. append(‘rect’)：根據(jù)每一個(gè)數(shù)據(jù)生成一個(gè)<rect>元素
5. attr({…})：修改每一個(gè)長(zhǎng)方體的樣式

這樣就能生成如下樣式：

C3.js

簡(jiǎn)述了D3之后呢，我們就來(lái)看看C3是怎樣讓這個(gè)Charting的過(guò)程更加簡(jiǎn)便的，對(duì)于上面這個(gè)柱狀圖，在C3中應(yīng)該如此實(shí)現(xiàn)：

<pre lang="javascript" line="1"> 
var chart = c3.generate({
 data: {
   columns: [
     ['data1', 30, 200, 100, 400, 150, 250]
   ],
   type: 'bar'
 },
 bar: {
   width: {
     ratio: 0.5 // this makes bar width 50% of length between ticks
   }
 }
});
</pre>

這里在生成過(guò)程中可以自動(dòng)添加、減少數(shù)據(jù)分類同時(shí)提供諸多的data binding的動(dòng)畫效果。而與D3不同的是，這里的坐標(biāo)系、label等圖表相關(guān)元素會(huì)自動(dòng)添加，而D3則需要自己寫code來(lái)render。可以說(shuō)，C3就是基于D3的一個(gè)真正的Charting library。

其他

其實(shí)Charting Tools還有很多，有看起來(lái)并不吸引人的傳統(tǒng)industry比較需要的版本，也有看上去很fancy的樣式。我用的最多的應(yīng)該就是NVD3和Chart.js（請(qǐng)叫我外貌協(xié)會(huì)）。

• NVD3同樣是基于D3.js的庫(kù)，它支持line chart, scatter, area chart, bar chart, pie chart和bullet，樣式上也同樣簡(jiǎn)潔。但是這個(gè)庫(kù)可以說(shuō)是D3和C3的中間層，它封裝了一部分D3底層數(shù)據(jù)操作從而提供了更簡(jiǎn)單的圖標(biāo)生存interface，但是在實(shí)現(xiàn)圖標(biāo)上更多操作時(shí)其實(shí)還是在和D3直接交流，實(shí)現(xiàn)困難。
• Chart.js則并不是基于SVG，而是基于Canvas的，因而在responsive, style control和interactions上比svg這樣直接和DOM操作更難。如果你感興趣也可以嘗試Paper.js。Chart.js支持line chat, bar chart, radar chart, polar area和pie。由于自己的程序需要，我曾經(jīng)閱讀了這個(gè)庫(kù)的source code，很多的碰撞實(shí)現(xiàn)還有數(shù)據(jù)變化后的動(dòng)畫效果都是可以編譯的，可惜現(xiàn)在的docs寫的并不developer friendly。（可以和我多聊這個(gè)，我有興趣哦）

最后來(lái)解決一個(gè)很多人問(wèn)過(guò)我的問(wèn)題，Canvas和SVG到底有什么區(qū)別，該怎么用：（一表勝千言）

<pre lang="javascript" line="1"> 
 // dataset: an array of integers
 // svg: a <svg>...</svg>寬500, 高100 
 var svg = d3.select('#content').append('svg')
   .attr('width', 500) .attr('height', 100);
 // bars
 svg.selectAll('rect').data(dataset).enter().append('rect')
   .attr({
   x: function(d, i) {return i * (w / dataset.length);},
   y: function(d) {return h - d;},
   width: (w / dataset.length - barPadding),
   height: function(d) {return d;},
   fill: function(d) {return 'rgb(0,0,' + d * 3 + ')';}
 });
</pre>

<pre lang="javascript" line="1"> 
var chart = c3.generate({
 data: {
   columns: [
     ['data1', 30, 200, 100, 400, 150, 250]
   ],
   type: 'bar'
 },
 bar: {
   width: {
     ratio: 0.5 // this makes bar width 50% of length between ticks
   }
 }
});
</pre>

<pre lang="javascript" line="1"> 
 // dataset: an array of integers
 // svg: a <svg>...</svg>寬500, 高100 
 var svg = d3.select('#content').append('svg')
   .attr('width', 500) .attr('height', 100);
 // bars
 svg.selectAll('rect').data(dataset).enter().append('rect')
   .attr({
   x: function(d, i) {return i * (w / dataset.length);},
   y: function(d) {return h - d;},
   width: (w / dataset.length - barPadding),
   height: function(d) {return d;},
   fill: function(d) {return 'rgb(0,0,' + d * 3 + ')';}
 });
</pre>

<pre lang="javascript" line="1"> 
var chart = c3.generate({
 data: {
   columns: [
     ['data1', 30, 200, 100, 400, 150, 250]
   ],
   type: 'bar'
 },
 bar: {
   width: {
     ratio: 0.5 // this makes bar width 50% of length between ticks
   }
 }
});
</pre>