2023年4月20日 星期四

簡介網頁統計圖表函式庫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快速上手  


0 意見:

張貼留言