各种数据可视化 charts 的图表类型

946 阅读6分钟

以下收集数据可视化 charts(图表) 相关库:

d3 是一个强大的可视化的库,如果有一些自定义的图标库。使用 d3 是一个非常好的选择。

  • echart 一个基于 JavaScript 的开源可视化图表库
  • Chart.js 为设计和开发人员准备的简单、灵活的 JavaScript 图表工具
  • highcharts 让数据可视化更简单 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库。
  • Ant Design Charts 简单好用的 React 图表库。
  • d3-graph-gallery 基于 D3.js 的简单的图标库
  • amcharts JavaScript 图表和地图适合您所有人的编程库数据可视化需求。
  • recharts 使用 React 和 D3 重新定义的图表库

本文主要关注:数据可视化库中不同的库实现的图表类型,以及不同类型分类和命名。

概念

部分图表类型介绍:

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

echarts

image.png

官方支持如下的图表类型以及子类型:

  • 柱状图
  • 折线图
  • 饼图
  • 散点图

柱状图(bar)

image.png

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

折线图(line)

image.png

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

饼图(pie)

image.png

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

散点图(scatter)

image.png

散点图名字说明
基础散点图scatter/basic-scatter

特点

  1. 跨平台:服务端渲染、微信小程序、百度智能小程序
  2. 开源社区丰富

Chart.js

image.png

一开源的基于 H5 的开源的图表库

名字说明
面积图charts/area
柱状图charts/bar
气泡图charts/bubble
环形图和饼图charts/doughnut-pie
折线图charts/line
类型混合charts/mixed
极地图charts/polar
雷达图charts/radar
离散图charts/scatter

HIGHCHARTS

image.png

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

image.png

简单好用的 React 图表库。

image.png

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

image.png

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

image.png

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

D3.js Graph Gallery

image.png

使用 D3.js 制作的简单图表的集合。

图表大分类

分类说明
分配Distribution
相关Correlation
排名Ranking
整体的一部分Part of a whole
演化Evolution
地图Map
Flow
常识General knowledge

小分类:分配 Distribution

image.png

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

小分类:相关

image.png

相关类型说明
散射Scatter
热图Heatmap
相关图Correlogram
泡沫Bubble
连接的散射Connected scatter
密度 2dDensity 2d

小分类:排名

image.png

相关类型说明
直方图Barplot
蜘蛛/雷达Spider / Radar
词云Wordcloud
平行Parallel
棒棒糖Lollipop
圆形条形图Circular Barplot

小分裂:整体一分部

image.png

相关类型说明
树状图Treemap
环形图Doughnut
饼图Pie chart
树状图Dendrogram
圆形包装Circular packing

小分类:演化

image.png

相关类型说明
线图Line plot
面积Area
堆积面积Stacked area
流图Streamchart

小分类:地图

image.png

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

小分类:流

image.png

相关类型说明
和弦图Chord diagram
网络Network
桑基Sankey
弧形图Arc diagram
边缘捆绑Edge bundling

小分类:常识

image.png

相关类型说明
基本Basics
自定义Custom
互动Interactivity
形状帮助程序Shape helpers
警告Caveats
数据艺术Data art

amcharts

收费

相关类型说明
柱图和直方图column-bar
线图和区域line-area
饼图和甜甜圈Pie & Donut
XY 和气泡XY & Bubble
地图Maps
烛台和OHLCCandlestick & OHLC
股票Stock
仪表Gauges
雷达和极地Radar & Polar
等级制度Hierarchy
Flow
漏斗和金字塔Funnel & Pyramid
其他Miscellaneous(词云等)

Recharts

image.png

基于 React 的组合式图表

小结

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