H5获取MySQL的值画折线图_canvas复杂折线图应用,想用h5+js画出下图所示的折线图效果,求实现方案...

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

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

先看改动的核心代码:

Chart.Scale = Chart.Element.extend({

draw : function(easingDecimal,scaleType,boundaryXper){var me = this,

ctx = this.ctx,

yLabelGap = (this.endPoint - this.startPoint) / this.steps,

xStart = Math.round(this.xScalePaddingLeft);        // wmq

var xEnd = Math.round(this.xScalePaddingRight),

yGap = this.endPoint - this.startPoint,

xGap = this.width - xStart - xEnd;        if (this.display){            //wmq

if(scaleType == 'preProfit'){

ctx.fillStyle = 'rgba(0,255,0,0.2)';

ctx.fillRect(xStart,this.startPoint,xGap*boundaryXper,yGap);

ctx.fillStyle = 'rgba(255,0,0,0.2)';

ctx.fillRect(xGap*boundaryXper+xStart,this.startPoint,xGap*(1-boundaryXper),yGap);

}

......

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