架構決策記錄:使用 TypeScript 和 JSON 進行資料視覺化的圖表庫工具包

首要目標:
選擇一個先進的圖表工具包,用於建立互動式視覺化,重點關注使用 TypeScript 和 JSON 的金融資料、科學資料和政府資料。該庫應提供強大的功能、靈活性,並且是開源的。

背景與需求:

敏捷開發(高優先順序):作為一家初創公司,快速迭代、原型設計和開發的靈活性至關重要。圖表庫必須支援快速的開發週期。
圖表型別(高優先順序):
- 環形圖(Doughnut Chart)
- 雷達圖(Radar Chart)
- 聚類流程圖(Clustering Process Chart)
- 帶時間軸的面積圖(Area Chart with Time Axis)
- K 線圖(Candlestick Chart)
- 南丁格爾玫瑰圖(Nightingale Chart)
- 地理 SVG 地圖(Geo SVG Map)
這些圖表型別對於視覺化複雜資料集(例如金融趨勢、科學指標和地理資訊)尤為重要。
免費且開源(高優先順序):工具包應是開源的,以避免許可費用、提供透明度,併為定製提供靈活性。
低重要性標準:
- 執行速度:雖然效能很重要,但它不是本次決策的首要優先事項。
- 可擴充套件性:雖然可擴充套件性通常很重要,但當前的需求是構建一個可能隨時間增長的 MVP。可擴充套件性方面的顧慮可以以後再解決。
- 向後相容性:對於初始構建而言不是首要關注點,只要該庫是現代的並且在積極維護即可。

評估的庫:

Apache ECharts
Chart.js
ApexCharts
AG Charts
Highcharts
Carbon Charts
Layer Cake
D3.js

1. Apache ECharts

概述:
Apache ECharts 是一個功能強大、靈活的圖表庫,用於互動式、可定製的視覺化。它支援種類繁多的圖表,尤其擅長複雜的動態視覺化。

優勢:

高階互動性:ECharts 擅長提供互動式圖表,提供縮放、平移和動態資料更新等功能。
環形圖、雷達圖、K 線圖、地理 SVG 地圖:ECharts 支援許多所需的圖表型別,包括環形圖、雷達圖、K 線圖和地理地圖視覺化。
免費且開源:ECharts 是開源庫,符合初創公司注重預算的特點,並提供修改程式碼的自由。
靈活性和可擴充套件性:高度可定製,廣泛支援動畫、自定義視覺化和高階圖表技術。

劣勢:

學習曲線:ECharts 雖然功能強大,但由於其靈活性和龐大的 API,學習曲線可能更陡峭。
文件複雜:文件全面,但對剛開始使用的開發者來說可能令人不知所措。

結論:
ECharts 非常適合本專案,因為它支援互動式圖表,包括 K 線圖、雷達圖和地理地圖等所有所需型別。它的開源性質符合專案對靈活性和成本效益的需求。

2. Chart.js

概述:
Chart.js 是一個簡單、易用的圖表庫,用於構建常見的圖表型別。它以簡單和易於整合而聞名。

優勢:

易用性:Chart.js 的設定和使用非常簡單,學習曲線極小。
開源:Chart.js 免費且開源,這對降低成本至關重要。
常見圖表型別:它支援環形圖、面積圖、雷達圖和折線圖等基本圖表,涵蓋了大部分主要需求。

劣勢:

高階圖表有限:Chart.js 原生不支援 K 線圖、地理 SVG 地圖或聚類流程圖等複雜圖表型別。雖然這些功能可以透過外掛或定製新增,但不像其他庫那樣直接。
互動性:雖然 Chart.js 支援基本的互動性(例如工具提示和懸停效果),但它提供的功能不如 ECharts 或 D3.js 高階。

結論:
Chart.js 非常適合簡單、快速的專案,但缺乏對複雜圖表型別的支援,使其不適合有 K 線圖和地理地圖等高階需求的資料密集型應用。它是原型設計的好選擇,但對於所需的圖表型別,建議使用更高階的工具。

3. ApexCharts

概述:
ApexCharts 是一個現代圖表庫,提供多種圖表型別,並專注於具有易用 API 的互動式視覺化。

優勢:

互動功能:ApexCharts 提供帶有工具提示、縮放、平移和更新的互動式圖表。
支援金融和科學圖表:它支援種類繁多的圖表型別,包括 K 線圖、雷達圖和麵積圖。
易用性:它的 API 簡單直接,易於整合到專案中。
免費且開源:ApexCharts 提供適合許多用例的免費開源版本。

劣勢:

複雜的定製:雖然它提供許多功能,但對於高度複雜或自定義的圖表需求,其定製選項不如 ECharts 或 D3.js 靈活。
地理地圖:ApexCharts 原生不支援地理地圖或聚類流程圖,而這兩者是本專案所需要的。

結論:
ApexCharts 因其易用性和互動性而成為有力的競爭者,但它在某些高階圖表型別上有所欠缺,特別是對地理地圖和聚類圖表的需求。它是簡單圖表的好選擇,但缺少一些所需功能。

4. AG Charts

概述:
AG Charts 是一個商業級圖表庫,專為效能和精確度而設計。它非常適合建立金融、科學和商業儀表板。

優勢:

高階圖表型別:AG Charts 支援許多高階圖表型別,包括 K 線圖、面積圖、雷達圖等。它還與其他 AG-Grid 產品深度整合。
高效能:它提供出色的效能,尤其是在處理大型資料集時。
互動性:AG Charts 支援縮放、工具提示和動態更新等多種互動功能。

劣勢:

並非完全免費:雖然 AG Charts 提供免費版本,但功能齊全的版本是付費的,這對希望儘量降低成本的初創公司來說可能是一個障礙。
複雜性:雖然該庫功能豐富,但對於較簡單的專案來說可能小題大做,與其他選項相比可能需要更多的設定和配置。

結論:
AG Charts 功能強大且豐富,但由於其商業性質和費用結構,可能不是最合適的選擇。是否合適取決於預算能否容納付費版本,或者是否偏好開源替代方案。

5. Highcharts

概述:
Highcharts 是一個流行的圖表庫,以其種類繁多的圖表型別和強大的定製選項而聞名。

優勢:

全面的圖表型別:Highcharts 支援種類繁多的圖表,包括 K 線圖、雷達圖、面積圖和地理地圖。
互動且動態:Highcharts 提供豐富的互動功能,包括下鑽、縮放和平移。
易用性:它擁有使用者友好的 API 和良好的文件,易於上手。

劣勢:

商業許可:雖然 Highcharts 為非商業用途提供免費版本,但商業許可費用昂貴,這對初創公司來說可能是一個重大缺點。
學習曲線:雖然不像 ECharts 那麼陡峭,但 Highcharts 的學習曲線對初學者來說仍然可能具有挑戰性。

結論:
Highcharts 是一個功能豐富的庫,但其商業許可使其不太適合開源、對成本敏感的專案。其全面的圖表選項是一個優點,但許可問題限制了它對這一用例的吸引力。

6. Carbon Charts

概述:
Carbon Charts 是 IBM 開發的圖表庫,旨在建立外觀美觀且高度可定製的圖表。

優勢:

可定製性:Carbon Charts 允許對圖表的外觀和行為進行廣泛的定製。
開源:它免費且開源,符合專案對經濟實惠的解決方案的要求。
支援常見圖表:它支援環形圖、雷達圖和麵積圖等常見圖表型別,但不支援地理地圖或 K 線圖等更高階的型別。

劣勢:

高階圖表型別有限:它不支援地理地圖、聚類流程圖或 K 線圖,而這些對專案至關重要。
生態系統較小:與 ECharts 或 Highcharts 等較大的圖表庫相比,Carbon Charts 的社群和生態系統較小。

結論:
Carbon Charts 是開源且可定製的,但缺乏對本專案所需較複雜圖表型別的支援。它更適合較簡單的圖表需求。

7. Layer Cake

概述:
Layer Cake 是一個資料視覺化庫,旨在建立靈活的分層視覺化。

優勢:

可定製的圖層:它為複雜的視覺化提供強大的分層選項。
開源:它免費且開源,對注重預算的專案是一個可行的選擇。

劣勢:

文件有限:Layer Cake 缺乏詳盡的文件和社群支援,與更成熟的庫相比更難使用。
並非為圖表而構建:Layer Cake 更適合非圖表的視覺化,因此其開箱即用的圖表選項有限。

結論:
雖然對於獨特的視覺化很有意思,但 Layer Cake 不適合 K 線圖或雷達圖等傳統圖表需求。它更適合標準圖表範圍之外的自定義視覺化。

8. D3.js

概述:
D3.js 是一個功能強大的 JavaScript 庫,用於透過 HTML、SVG 和 CSS 建立資料驅動的視覺化。

優勢:

無與倫比的靈活性:D3.js 幾乎可以建立任何型別的自定義視覺化,對於高階和互動式圖表非常強大。
功能廣泛:它支援所有所需的圖表型別,包括地理地圖、聚類圖表等。
可定製:D3.js 的定製程度無與倫比,使開發者能夠構建高度定製的視覺化。

劣勢:

陡峭的學習曲線:D3.js 的學習曲線陡峭,與其他庫相比整合起來更復雜。
耗時:用 D3.js 構建圖表可能很耗時,尤其是 K 線圖或環形圖等常見圖表。

結論:
D3.js 對於高階的定製圖表非常強大,但由於其陡峭的學習曲線和開發時間,對許多典型用例來說是小題大做。它最適合其他圖表庫無法提供所需定製水平的情形。

結論

在根據專案需求評估了各個庫之後,Apache ECharts 脫穎而出,是最佳選項。它支援全部所需的圖表,包括地理地圖、K 線圖和聚類圖表。它是開源的、功能豐富且互動性強,與專案目標完全契合。雖然 D3.js 提供了最大的靈活性,但其複雜性和時間投入使其不太適合希望快速迭代的初創公司。ApexCharts 和 Chart.js 是較簡單專案的良好替代方案,但缺乏對高階圖表型別的支援。