用 chart.js 畫圖表，十分鐘就上手

有人說未來是一個數據化的時代，特別是即將到來的物連網，會讓生活中的每樣東西都連上網路，當這些設備連上網後會隨者消費者的使用而產生一連串的原生數據；這些原生的數據在未經整理的情況下，對一般人來說會很難理解，往往需要經過專門的單位把數據轉換成有意義的文字或圖像，才能方便理解這些數據背後的意義。舉例來說，如果你有經營網站，一定會使用到 Google Analytics 這套圖像化的工具來幫你紀錄一些訪客資訊，像是瀏覽器的種類、停留的時間、使用那些關鍵字等等。讓你可以透過 Google Analytics 提供的圖表訊息，進一步調整你的網站。

Chart.js 就是將各種數據轉換成可視圖表的小工具，應用範圍也不僅止於網站，像是購物網站的銷售報表、業務的週報表、月業績表等等，幾乎每家公司都會有類似的將數據圖表化需求，使用範圍非常廣泛。加上使用簡單，你只需抓住一些基本的概念，就算是視覺設計師，也可以輕易透過 Chart.js 將數據轉換成可視的圖表。目前有提供圓餅圖、環狀圖、雷達圖、極地圖、柱狀圖、折線圖等六種圖表樣式。

基本運作原理：

雖然 Chart.js 可以表現的樣式有六種，每一種樣式基本上都分成三個步驟，分別為

1. 繪製 Canvas 工作區
2. 選擇資料類型，來源可能是資料庫或自行輸入
3. 最後則是把資料載入到樣式中

當然，細節的部分有些許的不同，但你只要掌握這三個大原則，遇到問題時，往這三方面去除錯，大致上因該都可以找出解決的方法。

第一步，引入 chart.js

請將下面的 code 複製到 head 的標籤裡

<script src="Chart.js"></script>

第二步，定義 CSS (非必要選項)

這部分可依你的需要自行調整

<style>
    .box{width:30%; float:left;}
    .zone{width:100%; height:100%;}
</style>

第三步：繪製一個 Canvas 工作區

請將下面的 code 複製到頁面 body 的適當位置。

<div class="box">
    <canvas id="chart-area" class="zone"></canvas>
</div>

第四步：選擇資料類型

由於 chart.js 有圓餅圖、環狀圖、雷達圖、極地圖、柱狀圖、折線圖等六種樣式，其中圓餅圖、環狀圖、極地圖的資料類型可以共用，柱狀圖、雷達圖、折線圖的資料也可以共用，也就是說大致上會有兩種資料類型，下面是每一種類型的基本設定。但由於設定的項目頗多，需要配合官網的說明來測試及調整，故無法在此一一詳細說明。

圓餅圖、環狀圖、極地圖

大括號內共有四個參數 (紅字)，分別代表數值、顏色、選取色及標籤名稱，參數與參數間需要加半形的逗號 (,)，被大括號包起來就是一組，可設置多組，組與組織間須加半形的逗號 (,)

<script>
    var doughnutData = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    }
]
</script>

柱狀圖、雷達圖、折線圖

<script>
var linesData = {
    labels: ["王大毛", "孫小毛", "曾甲仙", "胡蘭德", "吳美麗", "陳扁扁", "馬久久"],
    datasets: [
        {
            label: "本週業績表",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        }
    ]
};
</script>

第五步：把資料載入到樣式中，並繪製到 Canvas

其中 chart-area 的部分需要與 Canvas 的 id 相同
樣式有六種，分別為

1. Doughnut (環狀圖)
2. Pie (圓餅圖)
3. Line (折線圖)
4. Bar (柱狀圖)
5. Radar (雷達圖)
6. PolarArea (極地圖)

下面以 Doughnut 為例：

<script>
window.onload = function(){
    var ctx = document.getElementById("chart-area").getContext("2d");
    var myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
        responsive : true,
        animationEasing: "easeOutQuart",
    });
};
</script>

舉個例子從頭到尾實作一次：

假設有間踢踢五股份有限公司，裡面有孫小毛、王大毛及曾甲仙三位業務員，這個月的月績分別為 168, 143, 89，想用環狀圖的方式表現出來，code 如下：

引入 chart.js

<script src="Chart.js"></script>

定義 CSS

<style>
    .box{width:30%; float:left;}
    .zone{width:100%; height:100%;}
</style>

繪製一個 Canvas 工作區

<div class="box">
    <canvas id="chart-area" class="zone"></canvas>
</div>

設定 Script

<script>
var doughnutData = [
    {
        value: 168,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "孫小毛"
    },
    {
        value: 143,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "王大毛"
    },
    {
        value: 89,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "曾甲仙"
    }
]
window.onload = function(){
    var ctx = document.getElementById("chart-area").getContext("2d");
    var myDoughnut = new Chart(ctx).Doughnut(doughnutData, {
        responsive : true,
        animationEasing: "easeOutQuart",
    });
};
</script>

如果順利的話，你因該會看到如下的圖示

快去試試看吧，如果成功的話，看看有沒有辦法將同一個例子改成圓餅圖和極地圖。

延伸閱讀：

• Chart.js
• Chart.js 中文說明 (簡體字)