关于绘图的思考

绘制过程

很久之前做过一个医院护理单折线图的需求，其实也是类似的实现思路。 —— 使用ZRender实现护理单折线图功能

在自己实现了一遍之后，感觉无论是用代码还是用笔画，思路和实现逻辑都是一样的：

• 拿到数据源和图表配置要求
• 根据需求定位绘制区域
• 根据数据源在绘制区域内确定坐标轴范围和刻度
• 根据已知坐标轴进行绘制

其实像 G2、Echart 这类图表库，与自行绘制图表的不同点只在于它要满足更多的需求、更加的大而全。为了能够大而全，就会有大量配置项 API，它不能草率的开始绘制，而是需要先将数据源和配置项收集好，再根据已知条件进行一系列计算。最后才进行绘制。

G2 vs G2Plot

众所周知，G2Plot 是基于 G2 来实现的。它们在实现图表的不同之处在于：

• G2 是通过一条条的 API 来对图表进行定义和描述，更符合从头开始绘图的思路。最后通过 render() 函数进行真正的绘制。
• G2Plot 内部默认有 G2 的配置，再合并用户自定义的配置项。然后将最终配置项通过 G2 API 来完成最终绘制。

所以，使用 G2Plot 只需要知道各种配置项就可以完成需求，上手难度更小，适合一些大众需求。而 G2 可以根据需求逐步定制所需的图表，自由度较高，适合应对一些特殊需求。

图表组件的实现思路

• legend 通过已有数据源直接绘制图形和文本就可以
• tooltip 在 body 上创建一个 div 元素承载 tooltip 内容， 通过 canvas 对象的 hover 事件获取位置，将内容 div 通过绝对定位移动到目标位置。
• axis 通过 canvas 来绘制线和刻度，这里需要计算刻度的间隔和范围。
• label 通过 canvas 来绘制为本即可