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