C3.js入門案例

標籤：master   並且   tag   擷取   test   meta   target   rate   使用   

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,data3120,80,200140,50,210170,100,250150,70,300180,120,280

3.圖表顯示

使用瀏覽器開啟1_c3demo.html

初始開啟顯示（資料來自c3_text.json）：

 

兩秒後顯示如（資料來自c3_text.csv）：

 

C3.js入門案例