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

更新於 發佈於 閱讀時間約 4 分鐘

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

上圖是 apache echarts 的範例。

上圖是 apache echarts 的範例。


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

1.Chart.js

Chart.js 的 ICON

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 支援的各種圖形

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

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


2.Apache ECharts

ECharts 由 Apache 軟體基金會開發

ECharts 由 Apache 軟體基金會開發

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

ECharts 的示例相當豐富,各種報表用的 Chart圖,都有支援。

ECharts 的示例相當豐富,各種報表用的 Chart圖,都有支援。

ECharts 支援svg向量圖,json 格式的地圖資訊檔,還可以直接載入百度地圖

ECharts 支援svg向量圖,json 格式的地圖資訊檔,還可以直接載入百度地圖

ECharts 的儀錶盤示例。

ECharts 的儀錶盤示例。

ECharts 支援 lines3D 圖形

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 也是一種 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 是由 Google 免費提供的 JavaScript 函式庫。

Google Charts也支援各式各樣的 Charts

Google Charts也支援各式各樣的 Charts

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


5.Highcharts

HighCharts 是由 High Soft 提供的 JavaScript函式庫

HighCharts 是由 High Soft 提供的 JavaScript函式庫

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

HighCharts 同樣支援各式各樣的圖形

HighCharts 同樣支援各式各樣的圖形

HighCharts 最大的特色是可以將產出的Chart下載成圖片或是CSV、XLS

HighCharts 最大的特色是可以將產出的Chart下載成圖片或是CSV、XLS

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







留言
avatar-img
留言分享你的想法!
avatar-img
天空
1會員
20內容數
如果可以無所事事的放空,那才是真的幸福?
天空的其他內容
2025/03/06
使用 ldap3 2.9.1 pip install ldap3​ python: from ldap3 import Server, Connection, SIMPLE, SYNC, ALL import pandas as p d import json # LDAP 伺服器地址
2025/03/06
使用 ldap3 2.9.1 pip install ldap3​ python: from ldap3 import Server, Connection, SIMPLE, SYNC, ALL import pandas as p d import json # LDAP 伺服器地址
2025/03/06
最近看了一本書「29歲開始做,43歲提早退休…」 書中的大意是, 作者由29歲起,每月將收入的50%都存起來投資基金和買保險(養老險), 到了43歲時因職場上的不順遂,毅然決定提前退休。 書中並沒有詳細指出作者是如何「投資基金和買保險」來建立被動收入, 本書的內容比較多的是描述作者的退休生
Thumbnail
2025/03/06
最近看了一本書「29歲開始做,43歲提早退休…」 書中的大意是, 作者由29歲起,每月將收入的50%都存起來投資基金和買保險(養老險), 到了43歲時因職場上的不順遂,毅然決定提前退休。 書中並沒有詳細指出作者是如何「投資基金和買保險」來建立被動收入, 本書的內容比較多的是描述作者的退休生
Thumbnail
2024/12/19
什麼是 Active Directory? Active Directory (AD)是企業經常用來做電腦登入認證的系統服務,透過 AD 伺服器 IT管理員能夠用來儲存 使用者(User)、使用者群組(Group)和電腦(Computer) …等的相關資訊以進行認證與網域存取管理。 如何
Thumbnail
2024/12/19
什麼是 Active Directory? Active Directory (AD)是企業經常用來做電腦登入認證的系統服務,透過 AD 伺服器 IT管理員能夠用來儲存 使用者(User)、使用者群組(Group)和電腦(Computer) …等的相關資訊以進行認證與網域存取管理。 如何
Thumbnail
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
組織架構圖,又稱組織結構圖,是一種透過圖形方式展示組織內部各部門、職位及其相互關係的圖表。它清楚地描繪了組織的層級結構、職責分配以及資訊流動路徑,是理解和分析組織運作的重要工具。
Thumbnail
組織架構圖,又稱組織結構圖,是一種透過圖形方式展示組織內部各部門、職位及其相互關係的圖表。它清楚地描繪了組織的層級結構、職責分配以及資訊流動路徑,是理解和分析組織運作的重要工具。
Thumbnail
身為一個大公司的小小 IT 人員,最常接到的任務就是老闆想要看報表。而在報表上看到一堆的數字他們又不開心,於是只能做個美美的 Charts給他們看。 今天我們就來看看網路有什麼好用的工具,讓我們可以快速的畫出漂亮的圖形化 Charts 1.Chart.js Chart.js 是一個免
Thumbnail
身為一個大公司的小小 IT 人員,最常接到的任務就是老闆想要看報表。而在報表上看到一堆的數字他們又不開心,於是只能做個美美的 Charts給他們看。 今天我們就來看看網路有什麼好用的工具,讓我們可以快速的畫出漂亮的圖形化 Charts 1.Chart.js Chart.js 是一個免
Thumbnail
在日常的工作裡,設計主管要執行的項目真的多到不行,從執行面要做好原本在設計上份內的工作以外,還包含管理團隊、推進項目進度、成員的職涯規劃等。 在這樣的時空背景下,提升管理效率就是提高生產力的關鍵,也是確保團隊士氣和創造力的重要因素。今天將介紹五種我在日常使用的方式,目的就是為了每天被各種瑣事煩惱的
Thumbnail
在日常的工作裡,設計主管要執行的項目真的多到不行,從執行面要做好原本在設計上份內的工作以外,還包含管理團隊、推進項目進度、成員的職涯規劃等。 在這樣的時空背景下,提升管理效率就是提高生產力的關鍵,也是確保團隊士氣和創造力的重要因素。今天將介紹五種我在日常使用的方式,目的就是為了每天被各種瑣事煩惱的
Thumbnail
在職場上,組織架構圖是一種常用的圖表,用來展示公司或組織的人員結構和職位關係。製作組織架構圖可以幫助員工快速了解公司的組織架構,明確自己的職位和工作範圍,並促進部門間的溝通和協作。Excel是一款常用的辦公軟體,它提供了多種圖表製作工具,包括組織架構圖。使用Excel製作組織架構圖可以快速生成
Thumbnail
在職場上,組織架構圖是一種常用的圖表,用來展示公司或組織的人員結構和職位關係。製作組織架構圖可以幫助員工快速了解公司的組織架構,明確自己的職位和工作範圍,並促進部門間的溝通和協作。Excel是一款常用的辦公軟體,它提供了多種圖表製作工具,包括組織架構圖。使用Excel製作組織架構圖可以快速生成
Thumbnail
嗨!朋友們!我們都知道,簡報製作一直都需要很多的細心與耐心。如今隨著簡報模板的不斷更新,我們能參考已經創造出來的圖表樣式,使我們的簡報呈現專業且具有吸引力。因此,今天將介紹兩種最常使用的圖表-時間軸和組織圖,讓大家看看在呈現這兩種圖表時,有哪些不同的方式可以選擇。此外,更提供簡報連結供大家下載使用。
Thumbnail
嗨!朋友們!我們都知道,簡報製作一直都需要很多的細心與耐心。如今隨著簡報模板的不斷更新,我們能參考已經創造出來的圖表樣式,使我們的簡報呈現專業且具有吸引力。因此,今天將介紹兩種最常使用的圖表-時間軸和組織圖,讓大家看看在呈現這兩種圖表時,有哪些不同的方式可以選擇。此外,更提供簡報連結供大家下載使用。
Thumbnail
在職場上走跳免不了會遇到需要將進度與目標呈現出來的狀況,出現這種情形的時候是以什麼樣的形式呈現呢? 數據 第一個想到的就是用數據展示,如果用數據呈現的話可能會長這樣,有每個人的業績,也有目標,但誰達標誰沒達標呢?就要一筆一筆資料慢慢核對了 圖表 既然用數據還需要核對,那換個方式使用圖表,那圖表使用時
Thumbnail
在職場上走跳免不了會遇到需要將進度與目標呈現出來的狀況,出現這種情形的時候是以什麼樣的形式呈現呢? 數據 第一個想到的就是用數據展示,如果用數據呈現的話可能會長這樣,有每個人的業績,也有目標,但誰達標誰沒達標呢?就要一筆一筆資料慢慢核對了 圖表 既然用數據還需要核對,那換個方式使用圖表,那圖表使用時
Thumbnail
根據經理人這篇華爾街日報的整理,我們一起來盤點一下,想在職場提升自我價值(薪水提高)的我們,需要掌握的基礎技能(硬實力)有哪些?哪些技能可以幫我們加分?
Thumbnail
根據經理人這篇華爾街日報的整理,我們一起來盤點一下,想在職場提升自我價值(薪水提高)的我們,需要掌握的基礎技能(硬實力)有哪些?哪些技能可以幫我們加分?
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News