1、先确定需要绘制图走势图的table
2、获取table的尺寸,同时制作相应的canvs尺寸,canvs表格尺寸建议和表格尺寸相同,并通过定位覆盖在table之上,统称“设置画布”
let table = $('.chartsTable') // 通过jquery获取表格对象
// 设置画布
let cvs = document.createElement('canvas')
cvs.style.position = 'absolute'
cvs.style.left = 0 + 'px'
cvs.style.top = 0 + 'px'
cvs.width = table[0].scrollWidth // 获取表格的宽并用来确定画布的宽度
cvs.height = table.height() // 表格的高度等同画布高度
3、事先通过例如jquery选择器的方式,获取到需要绘制走势图的点的定位,将他们存储于数组之中,建议构造为以下格式
[
{left: 10, top: 20},
{left: 30, top: 40}
...
]
4、用画笔开始绘制走势图
let cxt = cvs.getContext('2d') // 画笔
cxt.strokeStyle = color // 颜色
cxt.m