在学习了 G2 源码后，就想着自己写个 chart 加深理解。这次我是用的 G 来实现的。其实用原生的 canvas api 或者其他绘图库都是差不多的。重要是复习一下思路。
功能效果图
实现步骤
前期准备
导入绘图库 G，它的 API 都会绑定到 window.G 上面.
<link rel="shortcut icon" href="https://gw.alipayobjects.com/zos/antfincdn/yAeuB2%24niG/favicon.png" />
<!-- G 核心 -->
<script src="https://unpkg.com/@antv/g/dist/index.umd.min.js" type="application/javascript"></script>
<!-- G 渲染器，支持 Canvas2D/SVG/WebGL -->
<script src="https://unpkg.com/@antv/g-canvas/dist/index.umd.min.js" type="application/javascript"></script>
创建需要渲染的 div
<div>
<div id="app"></div>
</div>
引入所需对象
const { Group, Circle, Text, Canvas, Line, Rect, CanvasEvent } = window.G;
创建画布
// 创建一个渲染器，这里使用 Canvas2D
const canvasRenderer = new window.G.Canvas2D.Renderer();
// 创建画布
const app = document.getElementById('app');
const canvas = new Canvas({
container: app,
width: options.width,
height: options.height,
renderer: canvasRenderer,
});
数据和配置
类似于 G2，应该要将数据和配置项解耦出来。
const data = [
{ "legend": "新登设备", "x": "2023-03-17", "y": 290 },
{ "legend": "新登设备", "x": "2023-03-18", "y": 371 },
{ "legend": "新登设备", "x": "2023-03-19", "y": 303 },
{ "legend": "新登设备", "x": "2023-03-20", "y": 580 },
{ "legend": "新登设备", "x": "2023-03-21", "y": 671 },
{ "legend": "新登设备", "x": "2023-03-22", "y": 776 },
{ "legend": "新登设备", "x": "2023-03-23", "y": 41340 },
{ "legend": "新登设备", "x": "2023-03-24", "y": 175221 }
]
// 集合管理配置
const options = {
width: 1000,
height: 600,
padding: 30,
lineWidth: 2,
tickLength: 5,
color: '#DCDFE6',
}
根据 padding 确定绘制区域
// 绘制边框
const rect = new Rect({
style: {
x: 0,
y: 0,
width: options.width,
height: options.height,
stroke: options.color,
lineWidth: options.lineWidth,
}
})
canvas.appendChild(rect)
// 绘制横坐标
const xAxis = new Line({
style: {
x1: options.padding,
y1: options.height - options.padding,
x2: options.width - options.padding,
y2: options.height - options.padding,
stroke: options.color,
lineWidth: options.lineWidth,
}
})
canvas.appendChild(xAxis);
// 绘制纵坐标
const yAxis = new Line({
style: {
x1: options.padding,
y1: options.padding,
x2: options.padding,
y2: options.height - options.padding,
stroke: options.color,
lineWidth: options.lineWidth,
}
})
canvas.appendChild(yAxis);
根据数据源来确定坐标轴的刻度
// 绘制横坐标刻度
const step = (options.width - (2 * options.padding)) / (data.length + 1)
for (let i = 0; i < data.length; i++) {
const item = data[i];
const tickLine = new Line({
style: {
x1: options.padding + (step * (i + 1)),
y1: options.height - options.padding,
x2: options.padding + (step * (i + 1)),
y2: options.height - options.padding - options.tickLength,
stroke: options.color,
lineWidth: options.lineWidth,
}
})
canvas.appendChild(tickLine);
const tickText = new Text({
style: {
x: options.padding + (step * (i + 1)) - 10,
y: options.height - options.padding + 20,
text: item.x.slice(8),
fill: '#303133',
fontSize: 12,
}
})
canvas.appendChild(tickText);
}
// 绘制纵坐标刻度
const valueStep = Math.max(...data.map(item => item.y)) * 1.1 / 6
const positionStep = (options.height - (2 * options.padding) - 10) / 6
for (let i = 0; i < 7; i++) {
const y = positionStep * (i)
const tickLine = new Line({
style: {
x1: options.padding,
y1: options.height - options.padding - y,
x2: options.padding + options.tickLength,
y2: options.height - options.padding - y,
stroke: options.color,
lineWidth: options.lineWidth,
}
})
canvas.appendChild(tickLine);
const gridLine = new Line({
style: {
x1: options.padding,
y1: options.height - options.padding - y,
x2: options.width - options.padding,
y2: options.height - options.padding - y,
stroke: '#EBEEF5',
lineWidth: 2,
}
})
canvas.appendChild(gridLine);
const tickText = new Text({
style: {
x: options.padding - 10,
y: options.height - options.padding - y + 3,
fill: '#303133',
fontSize: 12,
textAlign: 'right',
text: parseInt(valueStep * i / 10000),
}
})
canvas.appendChild(tickText);
}
折线图绘制
已知横坐标系和纵坐标系，那么就可以很方便的计算出每个数据点在图表上的位置了。再将他们通过线段连接起来就实现了折线图。
// 绘制折线图
for (let i = 0; i < data.length; i++) {
const item = data[i];
const x = options.padding + (step * (i + 1))
const y = options.height - options.padding - (item.y / valueStep) * positionStep
if (i < data.length - 1) {
const nextItem = data[i + 1];
const nx = options.padding + (step * (i + 2))
const ny = options.height - options.padding - (nextItem.y / valueStep) * positionStep
const line = new Line({
style: {
x1: x,
y1: y,
x2: nx,
y2: ny,
stroke: '#409EFF',
lineWidth: options.lineWidth * 2,
}
})
canvas.appendChild(line);
}
const circle = new Circle({
style: {
cx: x,
cy: y,
r: 2,
lineWidth: 1,
fill: '#FFFFFF',
stroke: '#409EFF'
}
})
canvas.appendChild(circle)
}
关于绘图的思考
绘制过程
很久之前做过一个医院护理单折线图的需求，其实也是类似的实现思路。 —— 使用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 来绘制为本即可
最后
一开始觉得 chart 库是神秘而高大上的东西，而在真正实践后我感觉，抛开一些高级功能不谈，其实实现一个 chart 还是很简单的。就和学生时代手绘图表的思路是一样的。无非是用代码实现而已。
本文正在参加「金石计划」
