canvas复杂折线图应用,想用h5+js画出下图所示的折线图效果,求实现方案

Question

原来的效果图是正态分布的,效果如下:

现在有新需求,曲线里面的背景色有两种,外面也是,曲线本身也有两种颜色,这个是要求的效果:

原来的是通过chart.js制作出来的,但对新需求来说明显满足不了了,求新插件推荐,如果光靠调用插件的api方法无法实现,请大神们顺带提供下附加的解决方案,谢谢!!!

Answer 1

这个问题解决有一段时间了，差点忘记还没有提供答案...
这个是通过简单修改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的源码后自然明白是什么意思。

Answer 2

Flot

Sparklines

Answer 3

这个……自己实现起来也不难的吧……
多搞几层canvas就行了……