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

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

注意:
這篇文章所介紹的 Chart.js 版本為 V1.x,如果你使用最新的 V2.x 時,請參閱這篇:用 CHART.JS 畫圖表 V2.0,十分鐘就上手

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

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

延伸閱讀:

4 thoughts on “用 chart.js 畫圖表,十分鐘就上手

  1. 回覆
    Axer - 2017-06-21

    感謝您提供的資訊,我正好有這樣的需求。

  2. 回覆
    vivian - 2017-09-13

    您好
    我照了您的作法操作
    不過有錯誤訊息
    顯示 " Uncaught TypeError: (intermediate value).Doughnut is not a function "

    1. 回覆
      ossian - 2017-09-13

      這篇是 2015 年左右寫的,當時的 Chart.js 還是 1.x 的版本,但目前官網上最新版本的是 2.0,剛剛去他的官網看了一下,效果變得很豐富,我猜它的操作方式可能有改變。這部份可能要等我有空的時候,再重寫一篇新版的 Chart.js

  3. 回覆

    […] 2015 年的時候寫了一篇關於 Chart.js 的小教學,由於將數據圖表化的功能在一般公司裡會很常用,通常會建議設計師學一套簡單來應付日常相關圖表的制作需要。Chart.js 在使用的難易度及呈現的效果上,一直是我心目中的第一選擇,當時寫教學文的時候 Chart.js 還只是 V1.x,設定上也比較簡單,非常適合沒有 Coding 背景的設計師使用。今年收到一篇網友的回饋時才發現 Chart.js 目前已經發展到 V2.0 了,功能變得更強大,像是新版的 Chart.js 支援混合型的圖表,動畫設定也變得更豐富,還有一些現代網站常見的功能,像是 RWD 的支援等等…最重要的是新版使用方式也與 1.x 有所不同。因此這篇是針對 Chart.js V2.0 的小教學,對象主要還是視覺設計師,內容會盡量簡化,方便大家馬上拿來用,希望對大家有幫助。 […]

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

Scroll to top