簡介網頁統計圖表函式庫Chart.js

文：顏怡宏 精誠資訊/恆逸教育訓練中心資深講師

在這個資訊爆炸的時代，我們經常性的要面對海量的數值資料，這些數值資料如果要用傳統表格的方式來呈現，很容易讓網站來訪者望而生畏。如果只需要讓使用者能夠在最短的時間內，快速明白這些數值的相對關係與比較，最直覺的方式就是將龐大的數值資料圖像化，將數值資料轉換各式各樣適合的圖表來增加網頁訪客的理解，因此將數值資料視覺圖像化是極其重要的手段。

然而在網頁中繪製圖表相對來說是十分困難的，一點都不像是在Excel這類型的試算表軟體中建立圖表，只要選一選功能就輕易的產生圖表。因此很多網站的做法，就是將數值資料先匯入到Excel中之後，經由Excel的圖表功能轉換成需要的數值圖表類型，例如是直方圖或是圓餅圖，接著將這個圖表儲存為網頁能夠使用的圖檔格式，例如PNG或是JPEG後再插入到網頁中，這樣當然可以一定程度的解決問題。但是如果資料一旦被修改的話，整個流程就要重新來過一次，很不方便。更不用說如果要直接從伺服器上取得動態的資料，並且即時以圖表的方式呈現在網頁上，這就是這種方案所完全無法做到的。

而為了滿足這種需求，因此英國的工程師Nick Downie就設計出了Chart.js。這是一個由JavaScript撰寫的數值圖表工具庫，由於是開放原始碼，因此也是完全免費的。 

Chart.js目前是最受歡迎的JavaScript數值資料圖表工具庫。Chart.js提供了八種類型的常用統計圖表類型，因此總是能夠找到最適合的特定圖表來呈現資料。

如果我們只想要快速的使用Chart.js來產生一個分析圖表，Chart.js預設一個理想的預設外觀配置，因此即使我們根本不指定任何選項，您也有可能獲得非常吸引人的圖表。例如Chart.js預設會啟用動畫功能，因此我們的數據可以立即吸引使用者的注意力。

但是如果想要有更好的表現，或是更客製化的功能，Chart.js不但是個非常輕巧的函式庫，並且還擁有豐富多樣化的設定，因此具備非常好的彈性。例如能夠自訂圖表的高度、動態說明註釋、縮放或拖放功能等，甚至還有內建的配色選項與自適應網頁(Responsive Web Design)，是一個可以快速將數值資料視覺化的理想工具。

而除了呈現單一的圖表類型之外，我們還可以將多種圖表類型組合成一個混合圖表，也就是將多種圖表類型混合到同一位置上，如此能夠更多面向、更清楚的呈現出數值資料的比較結果。

另外，我們在網頁上呈現圖形的時候，經常會遭遇到顯示效能的問題。例如很多JavaScript數值資料圖表工具庫都是利用<SVG>的標籤來完成。但是<SVG>這個標籤裡面是使用SVG(Scalable Vector Graphics可縮放向量圖形)的格式來描述圖形，而SVG格式是遵從XML語法，導致資料採用未壓縮的方式存放，因此資料量會相當龐大。又因為點資料完全由向量資料所構成，因此圖形要呈現在網頁裡面之前，要將大量SVG點與點之間的直線或是曲線，用數學公式即時運算描繪出來，這代表SVG需要大量的運算能力，而產生效能的問題。

而Chart.js是使用HTML5的<canvas>標籤來呈現圖表。canvas是使用點陣繪圖方式，這使得Chart.js擁有非常高的效能，大部分的優質網頁遊戲都是使用<canvas>標籤來完成，因此特別是對於大型數據資料和複雜的視覺化效果，Chart.js的效能是非常令人激賞的。

所有網頁開發人員，只要是對網頁統計圖表有需求的都會需要Chart.js。但是因為Chart.js是藉由撰寫JavaScript在<canvas>標籤中繪圖，因此要學習Chart.js之前，都會建議具備一定基礎的HTML/CSS/JavaScript知識。

而在恆逸教育訓練中心提供的課程「網頁統計圖表Chart.js快速上手」課程中，將會詳細介紹以下的內容：

1. Chart.js介紹與環境設定

2. 長條圖(Bar Chart)的建立

3. 圓餅圖(Pie Chart)的建立

4. 甜甜圈圖(Doughnut Chart)的建立

5. 折線圖(Line Chart)的建立

6. 極座標圓餅圖(Polar area Chart)的建立

7. 雷達圖(Radar Chart)的建立

8. 散佈圖(Scatter Chart)的建立

9. 氣泡圖(Bubble Chart)的建立

完成這個課程之後，當然就能夠輕鬆的在網頁中建立多種高互動性的美觀統計圖表。當然更可以進一步透過AJAX的技術，在需要的時候從伺服器取得動態資料，而即時產生美觀的圖表，例如以下的範例。

直條圖範例

 

圓餅圖範例

 

甜甜圈圖範例

 

 

👌👌學習推薦

【chjs】網頁統計圖表Chart.js快速上手