图和表

781 阅读2分钟

我们在日常的开发中使用图表示常见的,那图表📈有哪些现有的解决方案呢?

  1. Ant Design Charts 简单好用的 React 图表库。
  2. Antv 让数据栩栩如生 AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。
  3. EChart ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
  4. CHARTIST.JS 简单的响应式图标库。
  5. 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 和其他的组件库一样也是一个个的组件,我们需要什么就引用什么。

组件

  1. Area 面积图
    • 组件 StackedArea
    • 组件 Area
    • 组件 PercentStackedArea
  2. Bar 条形图
  3. Column 柱状图
  4. Line 折线图
  5. Pie 饼图
  6. tiny 迷你图
  7. waterfall 瀑布图
  8. combo 混合图
  9. Rose 玫瑰图
  10. WordCloud 云词图
  11. StepLine 基础阶梯图
  12. Scatter 散点图
  13. Radar雷达图
  14. liquid 水波图
  15. Heatmap 热力图
  16. Gauge 仪表盘
  17. Bullet 子弹图
  18. Funnel 漏斗图
  19. Calendar 日历图
  20. Bubble 气泡图
  21. Treemap 树图