架构决策记录:使用 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 是较简单项目的良好替代方案,但缺乏对高级图表类型的支持。