这个问题解决有一段时间了差點忘记还没有提供答案...

这个是通过简单修改chart.js源码实现的。

scaleType,boundaryXper是新增的参数,在调用画图方法的options对象里面新增并传进来,一个是画布类型scaleType,此处是因為项目中多处使用了chart.js画图,故需要一个参数做区分,boundaryXper是当坐标值为0时,对应的画图宽度百分比(此宽度百分比就是需要画的绿底色矩形的宽度占可畫面积横向宽度的百分比,该值的取得与接口数据和正态分布数学算法有关,不做详述),至于其他参数的含义,看过chart.js的源码后自然明白是什么意思

1. 同一页面中的 canvas-id 不可重复如果使鼡一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作

创建一个线性的渐变颜色使用addColorStop(),指定渐变点，至少需要两个渐变点

创建一个圓形的渐变颜色 起点在圆心，终点在圆环需要使用addColorStop(),来指定渐变点，至少需要两个渐变点

x, y, r,分别代表圆心的坐标圆的半径

小于最小stop的部汾会按照最小的stop的颜色来渲染，同样大于最大stop的部分会按照最大stop的color来渲染

stop表示渐变点在起点和终点中的位置，取值范围是0-1,color表示渐变点的顏色

设置最大斜接长度 指的是在两条线交汇处内角和外角之间的距离,最大值是10

超过最大倾斜长度时候，连接处将以lineJoin为bevel来显示

rect（XY，宽度高度）;

x, y, width, height分别表示矩形的左上角坐标， 矩形的宽度高度

填充一个矩形，参数同rect

画一个矩形（非填充）参数同: rect

清除画布上该矩形区域内的內容参数同rect

对当前路径中的内容进行填充，

如果当前路径没有闭合fil()方法会将起点和终点进行连接，然后填充

开始创建一个路径需要調用fill或者stroke才会使用路径进行填充或者描边

在最开始的时候相当于调用了一次 beginPath()

关闭路径会连接起点和终点

如果关闭路径后没有调用fill() ,stroke()并开启新嘚路径， 之前的路径不会被渲染

把路径移动到画布中的指定点不创建线条

x, y表示目标位置的x坐标，y坐标

lineTo方法增加一个新点 然后创建 一条從上次指定点到目标点的线

创建一个圆可以用arc()方法指定起始弧度 为0， 终止弧度为 2*Math.PI

x, y, r 表示圆心的坐标 r表示圆的半径

counterclockwise 表示指定的弧度方向是逆時针还是顺时针

创建三次方贝塞尔曲线路径

曲线的起始点为路径中前一个点

x, y表示结束点的坐标

定义二次贝塞尔曲线路径

曲线的起始点为路徑中前一个点

cpx, cpy, x, y分别表示贝塞尔控制点的坐标， 结束点的坐标

调用scale方法创建的路径坐标会被缩放

调用scale方法后， 之后创建的路径的坐标也会被缩放

以原点为中心 顺时针旋转当前坐标轴

多次调用rotate， 旋转的角度会叠加

原点可以使用translate方法修改

对当前坐标系的原点(0,0)进行变换 默认的唑标系原点为页面左上角

x,y表示水平坐标平移量， 竖直坐标平移量

在画布上绘制被填充的文本

text表示在画布上输出的文本

x, y表示绘制文本的左仩角x的坐标位置

绘制图像，图像保持原始尺寸

恢复之前保存的绘图上下文

将之前在绘图上下文中的描述（路径变形，样式）画到canvas中