如何在網頁上畫出漂亮 Chart 圖
身為一個大公司的小小 IT 人員，最常接到的任務就是老闆想要看報表。而在報表上看到一堆的數字他們又不開心，於是只能做個美美的 Charts給他們看。
上圖是 apache echarts 的範例。
今天我們就來看看網路有什麼好用的工具，讓我們可以快速的畫出漂亮的圖形化 Charts
1.Chart.js
Chart.js 的 ICON
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 支援的各種圖形
Chart.js的缺點就是沒有支援一些較專業的圖形，例如股票市場常用的K線圖、 統計數據分佈用的箱形圖(Box Plots)，也沒有一些較客製化的圖形，例如台灣縣市地圖之類的。
Chart.js的優點是簡單容易上手，官方的文件範例支援相當的完整。
2.Apache ECharts
ECharts 由 Apache 軟體基金會開發
ECharts 是一個免費開源的 JavaScript 工具庫，由 Apache軟體基金會提供，功能相當強大，幾乎可以支援各種常用報表圖形，還可以載入SVG向量圖片，或是儲存成JSON格式的地理座標，繪製出地圖。ECharts也可以直接載入百度地圖，在地圖上繪製線條。
ECharts 的示例相當豐富，各種報表用的 Chart圖，都有支援。
ECharts 支援svg向量圖，json 格式的地圖資訊檔，還可以直接載入百度地圖
ECharts 的儀錶盤示例。
ECharts 支援 lines3D 圖形
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 也是一種 JavaScript 資料視覺化工具庫
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 免費提供的 JavaScript 函式庫。
Google Charts也支援各式各樣的 Charts
Google Charts 因為是由 Google提供的服務，它能免費多久也是個問題，所以在網路上使用者就沒有其他函式庫來得多。
5.Highcharts
HighCharts 是由 High Soft 提供的 JavaScript函式庫
HighCharts 是由 High Soft 提供的 JavaScript 函式庫，它提個人和非商業用途使用者免費使用這一個函式庫。若是商業使用者則需要付費使用。
HighCharts 同樣支援各式各樣的圖形
HighCharts 最大的特色是可以將產出的Chart下載成圖片或是CSV、XLS
HighCharts 是相當簡單易用的 JavaScript 函式庫，用它畫出來的Charts相當的漂亮，可惜它有非商業的使用限制。
本篇參與的主題活動
你可能也想看
