以下收集数据可视化 charts(图表) 相关库:
d3 是一个强大的可视化的库,如果有一些自定义的图标库。使用 d3 是一个非常好的选择。
本文主要关注:数据可视化库中不同的库实现的图表类型,以及不同类型分类和命名。
概念
部分图表类型介绍:
| 名字 | 英文名字 | 说明 |
|---|
| 流程图 | Flowchart | 使用图形表示算法的思路是一种极好的方法,因为千言万语不如一张图。流程图在汇编语言和早期的BASIC语言环境中得到应用。相关的还有一种PAD图,对PASCAL或C语言都极适用。 |
| 直方图 | HistogramChart | 质量分布图,是一种统计报告图,由一系列高度不等的纵向条纹或线段表示数据分布的情况。 一般用横轴表示数据类型,纵轴表示分布情况。 |
| 关系图 | Relation Graph | 用于展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱 |
| 线图 | LineChart | 点与点之间进行连接,通常用于展示数据随时间变化的图 |
| 面积图 | AreaChart | 面积图是一种用于显示数据变化趋势的图表类型。它通过将数据点之间的区域填充来强调数据的变化。面积图通常用于显示时间序列数据,例如股票价格或气温变化。它可以帮助用户更清晰地了解数据的趋势和变化,以便做出更好的决策。 |
| 柱状图 | BarChart | 显示分布式数据,通常用于不同类和组之间的差异 |
| 饼图 | PieChart | 一般用于展示数据比例 |
| ... | | |
echarts

官方支持如下的图表类型以及子类型:
柱状图(bar)

| 柱状图名字 | 说明 |
|---|
| 基础柱状图 | bar/basic-bar |
| 堆叠柱状图 | bar/stacked-bar |
| 动态排序柱状图 | bar/bar-race |
| 阶梯瀑布图 | bar/waterfall |
折线图(line)

| 折线图名字 | 说明 |
|---|
| 基础折线图 | line/basic-line |
| 堆叠折线图 | line/stacked-line |
| 区域面积图 | line/area-line |
| 平滑曲线图 | line/smooth-line |
| 阶梯线图 | line/step-line |
饼图(pie)

| 饼图类型 | 说明 |
|---|
| 阶梯线图 | pie/basic-pie |
| 圆环图 | pie/doughnut |
| 南丁格尔图(玫瑰图) | pie/rose |
散点图(scatter)

| 散点图名字 | 说明 |
|---|
| 基础散点图 | scatter/basic-scatter |
特点
- 跨平台:服务端渲染、微信小程序、百度智能小程序
- 开源社区丰富
Chart.js

一开源的基于 H5 的开源的图表库
| 名字 | 说明 |
|---|
| 面积图 | charts/area |
| 柱状图 | charts/bar |
| 气泡图 | charts/bubble |
| 环形图和饼图 | charts/doughnut-pie |
| 折线图 | charts/line |
| 类型混合 | charts/mixed |
| 极地图 | charts/polar |
| 雷达图 | charts/radar |
| 离散图 | charts/scatter |
HIGHCHARTS

Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。
| 图类型 | 说明 |
|---|
| 直线图 | Line chart |
| 曲线图 | spline-chart |
| 面积图及面积范围图 | area-chart |
| 柱状图和条形图 | column-and-bar-charts |
| 饼图 | pie-chart |
| 范围图 | range-series |
| 散点和气泡图 | scatter-and-bubble-chart |
| 漏斗图及金字塔图 | funnel-and-pyramid-series |
| 极地图 | polar-chart |
| 瀑布图 | waterfall-series |
| 误差线图 | error-bar-series |
| 箱线图 | box-plot-series |
| 堆叠图 | stacking-charts |
Ant Design Charts

简单好用的 React 图表库。

| 名字 | 说明 |
|---|
| 流程图 | Flowchart |
| 关系图 | Relation Graph |
| 折线图 | Line |
| 面积图 | Area |
| 柱形图 | Column |
| 条形图 | Bar |
| 饼图 | Pie |
| 双轴图 | Dual Axes |
| 进度图 | Progress Plots |
| 散点气泡图 | Scatter and Bubble |
| 玫瑰图 | Rose |
| 关系图 | Relation Plots |
| 热力图 | Heatmap |

| 迷你类型名字 | 说明 |
|---|
| 迷你图 | Tiny Plots |
| 迷你折线图 | TinyLine |
| 迷你面积图 | TinyArea |
| 迷你柱形图 | TinyColumn |
| 进度条图 | Progress |
| 进度环图 | RingProgress |

| 名字 | 说明 |
|---|
| 矩形树图 | Treemap |
| 雷达图 | Radar |
| 漏斗图 | Funnel |
| 瀑布图 | Waterfall |
| 词云图 | WordCloud |
| 直方图 | Histogram |
| 旭日图 | Sunburst |
| 对称条形图 | BidirectionalBar |
| 玉珏图 | Radial-Bar |
| 小提琴图 | Violin |
| 箱型图 | Box |
| 韦恩图 | Venn |
| 股票图 | Stock |
| 环形填充图 | CirclePacking |
D3.js Graph Gallery

使用 D3.js 制作的简单图表的集合。
图表大分类
| 分类 | 说明 |
|---|
| 分配 | Distribution |
| 相关 | Correlation |
| 排名 | Ranking |
| 整体的一部分 | Part of a whole |
| 演化 | Evolution |
| 地图 | Map |
| 流 | Flow |
| 常识 | General knowledge |
小分类:分配 Distribution

| 分配类型 | 说明 |
|---|
| 小提琴 | Violin |
| 密度 | Density |
| 直方图 | Histogram |
| 箱线图 | Boxplot |
| 山脊线 | Ridgeline |
小分类:相关

| 相关类型 | 说明 |
|---|
| 散射 | Scatter |
| 热图 | Heatmap |
| 相关图 | Correlogram |
| 泡沫 | Bubble |
| 连接的散射 | Connected scatter |
| 密度 2d | Density 2d |
小分类:排名

| 相关类型 | 说明 |
|---|
| 直方图 | Barplot |
| 蜘蛛/雷达 | Spider / Radar |
| 词云 | Wordcloud |
| 平行 | Parallel |
| 棒棒糖 | Lollipop |
| 圆形条形图 | Circular Barplot |
小分裂:整体一分部

| 相关类型 | 说明 |
|---|
| 树状图 | Treemap |
| 环形图 | Doughnut |
| 饼图 | Pie chart |
| 树状图 | Dendrogram |
| 圆形包装 | Circular packing |
小分类:演化

| 相关类型 | 说明 |
|---|
| 线图 | Line plot |
| 面积 | Area |
| 堆积面积 | Stacked area |
| 流图 | Streamchart |
小分类:地图

| 相关类型 | 说明 |
|---|
| 地图 | Map |
| 分区统计 | Choropleth |
| 赫克斯宾地图 | Hexbin map |
| 制图 | Cartogram |
| 连接 | Connection |
| 气泡图 | Bubble map |
小分类:流

| 相关类型 | 说明 |
|---|
| 和弦图 | Chord diagram |
| 网络 | Network |
| 桑基 | Sankey |
| 弧形图 | Arc diagram |
| 边缘捆绑 | Edge bundling |
小分类:常识

| 相关类型 | 说明 |
|---|
| 基本 | Basics |
| 自定义 | Custom |
| 互动 | Interactivity |
| 形状帮助程序 | Shape helpers |
| 警告 | Caveats |
| 数据艺术 | Data art |
amcharts
收费
| 相关类型 | 说明 |
|---|
| 柱图和直方图 | column-bar |
| 线图和区域 | line-area |
| 饼图和甜甜圈 | Pie & Donut |
| XY 和气泡 | XY & Bubble |
| 地图 | Maps |
| 烛台和OHLC | Candlestick & OHLC |
| 股票 | Stock |
| 仪表 | Gauges |
| 雷达和极地 | Radar & Polar |
| 等级制度 | Hierarchy |
| 流 | Flow |
| 漏斗和金字塔 | Funnel & Pyramid |
| 其他 | Miscellaneous(词云等) |
Recharts

基于 React 的组合式图表
小结
- 常用的图标库:柱状图、直方图、饼图、环形图、玫瑰图、面积图、折线图、曲线图、云词图、气泡图和雷达图
- 除了图表之外还有:地图相关的图、股票图等行业图表以及日常工作的甘特图、流程图
- 在使用的时候值得注意,部分图表库是要收费的,尤其是商业场景要特别注意。