手写图表指南

1 前言

说到数据可视化，大家应该都不陌生。它旨在借助于图形化手段，清晰有效的传达与沟通信息。广义的数据可视化涉及信息技术、自然科学、统计分析、图形学等多种学科。

图例来源网络

我们熟知的图形、图表以及地图等都属于数据可视化的范畴。今天我们主要讨论数据可视化中的图表，像柱状图、折线图、面积图、饼图、热力图都是使用频率非常高的图表。

图例来源网络

如果要在移动端绘制一个类似于下图，使用真实数据渲染的简单面积图表，我们应该如何实现它呢？相信大家脑子里应该都有各种方案了，那么接下来我们就来一步步实现它。

2 技术选型

需求

• 图表样式定制化
  图表样式为我司设计师独立设计，最终实现效果应该做到100%还原设计细节；

• 交互效果
  默认情况下数据游标只显示当前数据点，如需查看其他月份或者时刻数据，需要用户手动点击切换；

• 曲线面积图
  最终需要绘制出一个面积图，也就是用真实数据绘制出的曲线与坐标轴相交而形成的一个区域；

明确了具体的需求之后，我们就可以考虑技术方案选型了。

2.1 图表库

目前业界有很多成熟的图表库，像我们熟知的highcharts、echarts，Bizcharts，G2，更高阶的three.js等等。如果采用现有图表库来实现上述图表的话，会存在以下一些问题。

• 无法100%还原图表样式

• 包体积大，引入会造成项目性能问题

引入现有图表库的方案固然非常简单，大大节省了前端同学的开发量。但是存在着以上两个比较突出的问题。

图表库的图表样式都是通过配置完成，实现出来的效果在某些细节上难以完全还原设计稿，并且翻文档测试配置项的过程也比较繁琐。而且如果后续设计同学需要优化图表样式，并且此优化难以通过现有图表库配置项实现的话，那可能就需要二次开发图表库，对我们来说，也是一个不小的工作量；

通常C端的图表需求并不是那么通用，可能一个项目也就实现这么一两个图表，如果引入图表库的话，对项目本身来说，无形中又增加了一些打包成本。那有些同学可能会说，现在的某些图表库已经可以按需引用了，这样增加打包体积这个问题可能就不是问题了，虽然现在的某些比较成熟的图表库可以按需引用，但是在引用某个图表文件之前还是要引入一些核心文件，这些核心文件依然会占据不小的包体积。总结来说，引入现有图表库的方案成本高、灵活性差。

2.2 canvas

canvas相信对每一个前端开发者来说都不陌生，如果我们采用canvas来绘制图表的话，有两个问题比较棘手，上文中有提到过，我们要实现的图表是有交互效果的，当用户点击数据点的时候，则需要显示当前数据点的数据游标，再点击其他数据点的时候，数据游标也要相应的切换。大家都知道，使用原生canvas来实现事件系统异常麻烦，并且canvas的重绘机制也是我非常不喜欢的一点。总结一下，原生canvas没有完备的事件系统，重绘机制繁琐；

当然，现在也有很多优秀的canvas框架能够解决上述问题，比如fabric.js和konva.js，尤其是fabric.js，让我们使用canvas不再别扭，感兴趣的同学也可以尝试一下。

2.3 svg

svg是一种基于XML语法的图像格式，是可缩放的矢量图形。那什么