我们在日常的开发中使用图表示常见的,那图表📈有哪些现有的解决方案呢?
- Ant Design Charts 简单好用的 React 图表库。
- Antv 让数据栩栩如生 AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。
- EChart ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
- CHARTIST.JS 简单的响应式图标库。
- react-chartist React component for Chartist.js
学习之前
因为图表📈一般都是通过 Canvas 实现的,所以需要对Canvas 有一个较好的理解。当然也会使用 SVG 作为渲染器,来渲染数据。
- MDN Canvas
<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画。 - SVG教程 可缩放矢量图形,即SVG,是W3C XML的分支语言之一,用于标记可缩放的矢量图形。目前SVG在Firefox、Opera、Webkit浏览器、IE等浏览器中已经部分实现。
- 使用 Canvas 或者 SVG 渲染 Canvas 更适合绘制图形元素数量非常大(这一般是由数据量大导致)的图表(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等),也利于实现某些视觉 特效。但是,在不少场景中,SVG 具有重要的优势:它的内存占用更低(这对移动端尤其重要)、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。
Ant Design Charts
先看有哪些组件?Ant Design Charts 和其他的组件库一样也是一个个的组件,我们需要什么就引用什么。
组件
- Area 面积图
- 组件 StackedArea
- 组件 Area
- 组件 PercentStackedArea
- Bar 条形图
- Column 柱状图
- Line 折线图
- Pie 饼图
- tiny 迷你图
- waterfall 瀑布图
- combo 混合图
- Rose 玫瑰图
- WordCloud 云词图
- StepLine 基础阶梯图
- Scatter 散点图
- Radar雷达图
- liquid 水波图
- Heatmap 热力图
- Gauge 仪表盘
- Bullet 子弹图
- Funnel 漏斗图
- Calendar 日历图
- Bubble 气泡图
- Treemap 树图