如何在網頁上畫出漂亮 Chart 圖

身為一個大公司的小小 IT 人員，最常接到的任務就是老闆想要看報表。而在報表上看到一堆的數字他們又不開心，於是只能做個美美的 Charts給他們看。

上圖是 apache echarts 的範例。

今天我們就來看看網路有什麼好用的工具，讓我們可以快速的畫出漂亮的圖形化 Charts

1.Chart.js

Chart.js 是一個免費開源的 JavaScript 工具庫，是由 Nick Dawnie在 2013年創建，目前由 Chart.js Team 維護，最新版來到4.4.6 (2024/10/28)。

Chart.js 支援長條圖(bar)，折線圖(line)，面積圖，圓餅圖(pie)，泡泡圖(bubble)，雷達圖(adar)，散佈圖(scatter)，極座標圖(polar area)…等類型。

Chart.js的缺點就是沒有支援一些較專業的圖形，例如股票市場常用的K線圖、 統計數據分佈用的箱形圖(Box Plots)，也沒有一些較客製化的圖形，例如台灣縣市地圖之類的。

Chart.js的優點是簡單容易上手，官方的文件範例支援相當的完整。

2.Apache ECharts

ECharts 是一個免費開源的 JavaScript 工具庫，由 Apache軟體基金會提供，功能相當強大，幾乎可以支援各種常用報表圖形，還可以載入SVG向量圖片，或是儲存成JSON格式的地理座標，繪製出地圖。ECharts也可以直接載入百度地圖，在地圖上繪製線條。

Apache ECharts 前身是百度ECharts，在2018年1月16日納入 Apache Incubator （孵化器），進而在 2020年12月16日孵化畢業，目前版本來到5.5.1(2024/6/27)。

Apache ECharts 缺點就是太強大，相較於Chart.js複雜了一點點。但是因為前身是百度ECharts，簡體中文的開發者相當多，遇到問題上網查一查應該都可以解決。

3.D3.js

D3.js 又稱為 Data-Driven Documents，是一個使用 JavaScript 開發的資料視覺化程式庫。首次面世的時間在2011年2月18日，目前的版本來到7.9.0(2024年3月12日)。

D3.js 可以將大量的數據（JSON、CSV或GeoJSON）建立成SVG圖片，並使用CSS來呈現資料，下圖就是運用D3.js + 台灣地理座標所製作的台灣縣市地圖。製作步驟

D3.js的運用靈活性相當高，可以創建各種複雜的圖表和視覺化效果，但相對的就比較難以入門，使用者需要具一定的JavaScript和SVG知識，開發的時間也較長。

4.Google Charts

Google Charts 是由 Google 免費提供的 JavaScript 函式庫。

Google Charts 因為是由 Google提供的服務，它能免費多久也是個問題，所以在網路上使用者就沒有其他函式庫來得多。

5.Highcharts

HighCharts 是由 High Soft 提供的 JavaScript 函式庫，它提個人和非商業用途使用者免費使用這一個函式庫。若是商業使用者則需要付費使用。

HighCharts 是相當簡單易用的 JavaScript 函式庫，用它畫出來的Charts相當的漂亮，可惜它有非商業的使用限制。