有人說未來是一個數據化的時代,特別是即將到來的物連網,會讓生活中的每樣東西都連上網路,當這些設備連上網後會隨者消費者的使用而產生一連串的原生數據;這些原生的數據在未經整理的情況下,對一般人來說會很難理解,往往需要經過專門的單位把數據轉換成有意義的文字或圖像,才能方便理解這些數據背後的意義。舉例來說,如果你有經營網站,一定會使用到 Google Analytics 這套圖像化的工具來幫你紀錄一些訪客資訊,像是瀏覽器的種類、停留的時間、使用那些關鍵字等等。讓你可以透過 Google Analytics 提供的圖表訊息,進一步調整你的網站。
這篇文章所介紹的 Chart.js 版本為 V1.x,如果你使用最新的 V2.x 時,請參閱這篇:用 CHART.JS 畫圖表 V2.0,十分鐘就上手
Chart.js 就是將各種數據轉換成可視圖表的小工具,應用範圍也不僅止於網站,像是購物網站的銷售報表、業務的週報表、月業績表等等,幾乎每家公司都會有類似的將數據圖表化需求,使用範圍非常廣泛。加上使用簡單,你只需抓住一些基本的概念,就算是視覺設計師,也可以輕易透過 Chart.js 將數據轉換成可視的圖表。目前有提供圓餅圖、環狀圖、雷達圖、極地圖、柱狀圖、折線圖等六種圖表樣式。
基本運作原理:
雖然 Chart.js 可以表現的樣式有六種,每一種樣式基本上都分成三個步驟,分別為
- 繪製 Canvas 工作區
- 選擇資料類型,來源可能是資料庫或自行輸入
- 最後則是把資料載入到樣式中
當然,細節的部分有些許的不同,但你只要掌握這三個大原則,遇到問題時,往這三方面去除錯,大致上因該都可以找出解決的方法。
第一步,引入 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 相同
樣式有六種,分別為
- Doughnut (環狀圖)
- Pie (圓餅圖)
- Line (折線圖)
- Bar (柱狀圖)
- Radar (雷達圖)
- 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 中文說明 (簡體字)
感謝您提供的資訊,我正好有這樣的需求。
您好
我照了您的作法操作
不過有錯誤訊息
顯示 " Uncaught TypeError: (intermediate value).Doughnut is not a function "
這篇是 2015 年左右寫的,當時的 Chart.js 還是 1.x 的版本,但目前官網上最新版本的是 2.0,剛剛去他的官網看了一下,效果變得很豐富,我猜它的操作方式可能有改變。這部份可能要等我有空的時候,再重寫一篇新版的 Chart.js