C3.js是基於D3.js開發的JavaScript庫，它可以讓開發者構建出可復用的圖表，並且還提供了一系列圖表上的交互行為。通過C3，只需要往generate函數中傳入數據對象就可以輕松的繪制出圖表，方便開發者使用。接下來，一步步來完成一個小案例創建。
1.安裝
在C3.js的代碼托管地址（https://github.com/c3js/c3）下載c3-master，里面有我們構建圖表所必須的文件，其中最主要的就是c3.css、c3.min.js。由於C3依賴於D3，所以你也需要下載D3，我們可以在http://d3js.org/下載最新版本的d3.js，也可以在https://github. com/mbostock/d3/tags下載之前的版本。下載解壓后找到我們需要的文件d3.min.js。
2.創建圖表
創建的文件目錄如下：
c3通過傳遞參數調用generate()方法來生成圖表，並且圖表中的元素將會被作為bindto（綁定）的指定選擇器。
- 1_c3demo.html:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>c3demo1</title> <!-- 加載c3.css文件--> <link href="c3.css" rel="stylesheet" type="text/css"> <!-- 加載d3.js和c3.js --> <script src="d3.min.js" charset="utf-8"></script> <script src="c3.min.js"></script> </head> <body> <!--准備綁定圖表的元素--> <div id="chart"></div> </body> <script> // 調用generate()方法 var chart = c3.generate({ // 參數獲取 data: { url: './data/c3_test.csv' // 通過url獲得csv格式數據 } }); // 設定延時函數setTimeout setTimeout(function () { c3.generate({ // 參數獲取 data: { url: './data/c3_test.json',// 通過url獲得json數據 mimeType: 'json' } }); }, 2000); </script> </html>
- c3_text.json:
{ "data1": [220, 240, 270, 250, 280], "data2": [180, 150, 300, 70, 120], "data3": [200, 310, 150, 100, 180] } - c3_text.csv:
data1,data2,data3 120,80,200 140,50,210 170,100,250 150,70,300 180,120,280
3.圖表顯示
使用瀏覽器打開1_c3demo.html
初始打開顯示（數據來自c3_text.json）：
兩秒后顯示如下圖（數據來自c3_text.csv）：
