图表控件Flot改造

 

 

 

 

不得不说，flot算是一个精巧的js绘制图表的插件。原型类似上图。下面列出一些API。

网上有很多介绍其API的文章，有兴趣可以去cnblogs.com上去搜搜。目前，这个只是实现了，点线，区域图形，以及饼图，柱状图的绘制。一般情况下做一点简单的应用时可以的。但是，现在需要将其改造成另一个样子。

              背景区域绘制

              可以描点，并且可以根据不同点的数据，将点绘制为不同的颜色。

              根据数据序列的不同，以及数据序列的个数，绘制多张不同的控制图。传入几个数据序列绘制几张图。

              数据序列只是一个数组，横坐标为时间，纵坐标为值。纵坐标只显示UCL，CL，lCL三个数值

              多张控制图时，只有最后一张控制图显示时间横轴。

              只有第一张图需要根据数据点值的不同，设置点的颜色。

              ToolTips需要用数组传入，不使用其拼字符串的形式。

              小批换批时，根据传入的换批时间绘制换批提示线。

改造后效果为：

 

 

 

  绘制背景区域。

首先，影藏其网格线。需要将其源代码中drawGrid（）方法的，绘制网格线部分注释掉。第1680到1764行。

它原有的绘制背景的方法，我们不适用，并且重写其方法。增加方法function drawBackground(options){}参数是innit时传入的options。

方法代码：

          var top=ticks[2];

          var center=ticks[1];

          var bottom=ticks[0];

          var percent=plotHeight/(max-min);

       

 

         //第一个空白区域高度为00到max-top

         var area1=(max-top)*percent;

           ctx.fillStyle = "#F8F8FF";

           ctx.fillRect(0, 0, plotWidth, area1);

 

             ctx.strokeStyle = "#696969";

             ctx.lineWidth = 0.5;//0, area3, plotWidth, smalltoparea

             ctx.moveTo(0, area1);

             ctx.lineTo(plotWidth, area1);

           //第二个区域为：area1到area2加上，（top-center）/3

           var smalltoparea=((top-center)/3)*percent;

              ctx.fillStyle = "rgb(250, 188, 186)";

                ctx.fillRect(0, area1, plotWidth, smalltoparea);

            //第三个区域

            var area2=2*smalltoparea;

              ctx.fillStyle = "rgb(251, 254, 188)";

           ctx.fillRect(0, area2, plotWidth, smalltoparea);

           // 第四个区域

         var area3=3*smalltoparea;

              ctx.fillStyle = "rgb(209, 254, 214)";

           ctx.fillRect(0, area3, plotWidth, smalltoparea);

           //CL下面每一个小区域高度

           var smallbottomarea=((center-bottom)/3)*percent;

           var area4=4*smalltoparea;

 

                        ctx.strokeStyle = "#696969";

                        ctx.lineWidth = 0.5;//0, area3, plotWidth, smalltoparea

                        ctx.moveTo(0, area4);

                        ctx.lineTo(plotWidth, area4);

                    

              ctx.fillStyle = "rgb(209, 254, 214)";

           ctx.fillRect(0, area4, plotWidth, smallbottomarea);

 

             var area5=area4+smallbottomarea;

              ctx.fillStyle = "rgb(251, 254, 188)";

           ctx.fillRect(0, area5, plotWidth, smallbottomarea);

 

 

           var area6=area5+smallbottomarea;

           ctx.fillStyle = "rgb(250, 188, 186)";

           ctx.fillRect(0, area6, plotWidth, smallbottomarea);

 

         

 

            var area7=area6+smallbottomarea;

             ctx.fillStyle = "#F8F8FF";

             ctx.fillRect(0, area7, plotWidth, smallbottomarea);

             ctx.strokeStyle = "#696969";

             ctx.lineWidth = 0.5;//0, area3, plotWidth, smalltoparea

             ctx.moveTo(0, area7);

             ctx.lineTo(plotWidth, area7);

                        ctx.stroke();

                          ctx.restore();

   

}

 

填充区域时，其小坐标原点在绘图区域左上角。需要根据比例算出需要在小坐标中绘制背景的高度。背景分为八个区，从坐标（0，0）点高度依次叠加。在draw()方法中调用drawbackground(options)方法。// if (!options.grid.backgroundImage) ctx.clearRect(0, 0, canvasWidth, canvasHeight);

        //   ctx.clearRect(0, 0, canvasWidth, canvasHeight);

 

            var grid = options.grid;

 

            // draw background, if any

            //if (grid.show && grid.backgroundColor)

                drawBackground(options);

绘制表格，绘制背景，绘制数据序列都在draw()方法中调用。

二、描点，根据不同的数据将点绘制为不同的颜色。后台根据不同的判异规格，将数据点序列判异后，返回一个与数据点一一对应的数组。数组中保存数据点是否被判异。不判异的点为0，判异的点位1。所有为0的点都使用正常颜色，为1的点使用红色。源代码从2124行开始。

   function drawSeriesPoints(series) {

            function plotPoints(datapoints, radius, fillStyle, offset, shadow, axisx, axisy, symbol,ispoint) {

                var points = datapoints.points, ps = datapoints.pointsize;

                //复制 产生新的ColorIndex数组

                var ColorArry=[];

                if (series.colorIndex!=null&&series.colorIndex.length>0) {

                   for (var i = 0; i < series.colorIndex.length; i++) {

    ColorArry.push(series.colorIndex[i]);

     ColorArry.push(series.colorIndex[i]);

//由于每个points都包含两个坐标轴的数据，先x轴，后y轴。一一对应的数据也需要成对出现

}

   

}

             

                for (var i = 0; i < points.length; i += ps) {

                    var x = points[i], y = points[i + 1];

                  //                    if (x == null || x < axisx.min || x > axisx.max || y < axisy.min || y > axisy.max)

//                        continue;

                         if (x == null || x < axisx.min || x > axisx.max )//超出x轴的数据不绘图

                        continue;

                    //超出最大值的点，在绘制时将其值设为最大值，不会改变原有数据

                    if (y < axisy.min ) {

                          y= axisy.min ;

                            }

                    if (y > axisy.max) {

                           y=axisy.max;

                            }

                    

                    ctx.beginPath();

                    x = axisx.p2c(x);

                    y = axisy.p2c(y) + offset;

                    if (symbol == "circle")

                        ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false);

                    else

                        symbol(ctx, x, y, radius, shadow);

                    ctx.closePath();

                    if (ColorArry[i]==1) {

                        ctx.fillStyle = "#FF0000";

                        ctx.strokeStyle="#FF0000";

                        ctx.fill();

                     

}

else {

       if (fillStyle) {

                        ctx.fillStyle =  series.color;

                        ctx.fill();

                    }

}

                

                    ctx.stroke();

 

                    if (ispoint) {

     ctx.strokeStyle=   series.color;

}

                  

                }

            }

           

            ctx.save();

            ctx.translate(plotOffset.left, plotOffset.top);

 

            var lw = series.points.lineWidth,

                sw = series.shadowSize,

                radius = series.points.radius,

                symbol = series.points.symbol;

            if (lw > 0 && sw > 0) {

                // draw shadow in two steps

                var w = sw / 2;

                ctx.lineWidth = w;

                ctx.strokeStyle = "rgba(0,0,0,0.1)";

                plotPoints(series.datapoints, radius, null, w + w/2, true,

                           series.xaxis, series.yaxis, symbol,false);

 

                ctx.strokeStyle = "rgba(0,0,0,0.2)";

                plotPoints(series.datapoints, radius, null, w/2, true,

                           series.xaxis, series.yaxis, symbol,false);

            }

 

            ctx.lineWidth = lw;

            ctx.strokeStyle = series.color;

            plotPoints(series.datapoints, radius,

                       getFillStyle(series.points, series.color), 0, false,

                       series.xaxis, series.yaxis, symbol,true);

            ctx.restore();

        }

 

我们改变了最大值点的绘制，原本如果数据点超出最大值时，是不绘制点的。此时我们将超出最大值的点的值设为最大值。那么，还需要更改其亮点之间的连接线。

方法为：（源代码1867行开始）

 

            function plotLine(datapoints, xoffset, yoffset, axisx, axisy) {

                var points = datapoints.points,

                    ps = datapoints.pointsize,

                    prevx = null, prevy = null;

               

                ctx.beginPath();

                for (var i = ps; i < points.length; i += ps) {

                    var x1 = points[i - ps], y1 = points[i - ps + 1],

                        x2 = points[i], y2 = points[i + 1];

                   

                    if (x1 == null || x2 == null)

                        continue;

 

                    // clip with ymin

                    if (y1 <= y2 && y1 < axisy.min) {

                        if (y2 < axisy.min)

                        y2=axisy.min;

                          //  continue;   // line segment is outside

                        // compute new intersection point

                       // x1 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;

                        y1 = axisy.min;

                    }

                    else if (y2 <= y1 && y2 < axisy.min) {

                        if (y1 < axisy.min)

                        y1=axisy.min;

                          //  continue;

                       // x2 = (axisy.min - y1) / (y2 - y1) * (x2 - x1) + x1;

                        y2 = axisy.min;

                    }

 

                    // clip with ymax

                    if (y1 >= y2 && y1 > axisy.max) {

                        if (y2 > axisy.max)

                        y2=axisy.max;

                         //   continue;

                       // x1 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;

                        y1 = axisy.max;

                    }

                    else if (y2 >= y1 && y2 > axisy.max) {

                        if (y1 > axisy.max)

                        y1=axisy.max;

                         //   continue;

                       // x2 = (axisy.max - y1) / (y2 - y1) * (x2 - x1) + x1;

                        y2 = axisy.max;

                    }

 

                    // clip with xmin

                    if (x1 <= x2 && x1 < axisx.min) {

                        if (x2 < axisx.min)

                            continue;

                        y1 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;

                        x1 = axisx.min;

                    }

                    else if (x2 <= x1 && x2 < axisx.min) {

                        if (x1 < axisx.min)

                            continue;

                        y2 = (axisx.min - x1) / (x2 - x1) * (y2 - y1) + y1;

                        x2 = axisx.min;

                    }

 

                    // clip with xmax

                    if (x1 >= x2 && x1 > axisx.max) {

                        if (x2 > axisx.max)

                            continue;

                        y1 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;

                        x1 = axisx.max;

                    }

                    else if (x2 >= x1 && x2 > axisx.max) {

                        if (x1 > axisx.max)

                            continue;

                        y2 = (axisx.max - x1) / (x2 - x1) * (y2 - y1) + y1;

                        x2 = axisx.max;

                    }

 

                    if (x1 != prevx || y1 != prevy)

                        ctx.moveTo(axisx.p2c(x1) + xoffset, axisy.p2c(y1) + yoffset);

                   

                    prevx = x2;

                    prevy = y2;

                    ctx.lineTo(axisx.p2c(x2) + xoffset, axisy.p2c(y2) + yoffset);

                }

                ctx.stroke();

            }

 

        

由于先前绘制时，超出最大值的数据不绘制，所以当数据移到修改后的点时也不会显示ToolTip。

源码2439行   function findNearbyItem(mouseX, mouseY, seriesFilter) 方法中，需要将超出最大值的数据点设为最大值。

2470行增加几行代码

                     if (y < axisy.min ) {

                        y= axisy.min ;

                             }

                        if (y > axisy.max) {

                              y=axisy.max;

                              }

 

然后直接获取数据位置，取其y值

function showTooltip(x, y, contents) {

 

 

        var ev = document.onmousemove;

        var mousePos = mousePosition(ev);

        y = mousePos.y;

        $('<div id="tooltip">' + contents + '</div>').css({

            position: 'absolute',

            display: 'none',

            top: y + 5,

            left: x + 5,

            border: '1px solid #fdd',

            padding: '2px',

            'background-color': '#fee',

            opacity: 0.80

        }).appendTo("body").fadeIn(200);

    }

 

获取鼠标位置：

function mousePosition(ev){

    var x, y;

    var ev = ev || window.event;

    return {

        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

        y:ev.clientY + document.body.scrollTop  - document.body.clientTop

    };

}

 

三、根据数据序列个数不同，绘制不同张数的控制图。目前Spc控制图最多有三张，至少有1长。所以将绘制方法包装一下即可。

所有的数据序列，时间，自定义的tooltips等都已参数传入。并计算其最大最小值。最没有技术的就是这个部分….

function DrawChart(chartcount, spec1, spec2, spec3, data1, reddotArry, data2, data3, timeArry, batchChangeTime, Tips1, Tips2, Tips3, placeholder1, placeholder2, placeholder3) {

    var d1 = [];

    var d2 = [];

    var d3 = [];

    var changeTime = [];

    var maxspec1 = 0;

    var minspec1 = 0;

    var specMaxLength

    if (spec1 != null && spec1.length > 0) {

        maxspec1 = spec1[2] + (spec1[2] - spec1[1]) / 3;

        minspec1 = spec1[0] -(spec1[1] - spec1[0]) / 3;

    }

    var maxspec2 = 0;

    var minspec2 = 0;

    if (spec2 != null && spec2.length > 0) {

        maxspec2 = spec2[2] + (spec2[2] - spec2[1]) / 3;

        minspec2 = spec2[0] - (spec2[1] - spec2[0]) / 3;

    }

    var maxspec3 = 0;

    var minspec3 = 0;

    if (spec3 != null && spec3.length > 0) {

        maxspec3 = spec3[2] + (spec3[2] - spec3[1]) / 3;

        minspec3= spec3[0] - (spec3[1] - spec3[0]) / 3;

    }

 

 

 

 

    if (timeArry != null && timeArry.length > 0) {

        for (var i = 0; i < data1.length; i++) {

            d1.push([GetTimeStep(new Date(timeArry[i])), data1[i]]);

        }

        for (var i = 0; i < data2.length; i++) {

            d2.push([GetTimeStep(new Date(timeArry[i])), data2[i]]);

        }

        for (var i = 0; i < data3.length; i++) {

            d3.push([GetTimeStep(new Date(timeArry[i])), data3[i]]);

        }

    }

 

 

    if (batchChangeTime != null && batchChangeTime.length>0) {

        for (var i = 0; i < batchChangeTime.length; i++) {

            changeTime.push(GetTimeStep(new Date(batchChangeTime[i])));

        }

    }

 

    if (chartcount == 1 || (placeholder2 == "" && placeholder3 == "")) {

        DrawLastChart(spec3, maxspec3, minspec3, d3, changeTime, Tips3, reddotArry, placeholder3, timeArry);

        $(placeholder1).hide();

        $(placeholder2).hide();

    }

    else if (chartcount == 2 || placeholder3 == "") {

        plot3 = DrawLastChart(spec3, maxspec3, minspec3, d3, changeTime, Tips3, null, placeholder3);

        DrawFirstChart(spec1, maxspec1, minspec1, d1, changeTime, Tips1, reddotArry, placeholder1,plot3);

     

        $(placeholder2).hide();

    }

    else if (chartcount == 3) {

       plot2= DrawCenterChart(spec2, maxspec2, minspec2, d2, changeTime, Tips2, placeholder2);

       plot3= DrawLastChart(spec3, maxspec3, minspec3, d3, changeTime, Tips3, null, placeholder3);

        DrawFirstChart(spec1, maxspec1, minspec1, d1, changeTime, Tips1, reddotArry, placeholder1,plot2,plot3);

      

    }

    else {

        placeholder1.hide();

        placeholder2.hide();

        placeholder3.hide();

    }

 

 

}

 

然后调用绘制控制图的方法即可。第一张图：需要根据数据点的不同标红。第二张：不需要横坐标。但是数据要与第一张图一一对应。第三张图：需要横坐标，而且第三张图，有时需要当第一张图使用。所以需要三种绘图方法。DrawFirstChart（）；DrawCenterChart（）；DrawLastChart（）；

具体代码在后面贴出。

三张图数据点的一一对应。

  三张图的绘制时间是一致的。即同一时间会在三张图中绘制三个点。此时，如果不做处理，绘制出来的数据是有偏移的——与时间不能对应。有两种方式，可以设置坐标轴的小数点位置，但是会出现以下情况：

0.0000或者，23.1220与3.1200的位置依旧有偏移。

 固定左边坐标轴位置：擦，还要改源码

877行  function measureTickLabels(axis)方法中修改923行

                if (labels.length > 0) {

                    dummyDiv = makeDummyDiv(labels, "");

                    if (w == null)

                    w=40;

                       // w = dummyDiv.children().width();

                    if (h == null)

                        h = dummyDiv.find("div.tickLabel").height();

                    dummyDiv.remove();

                }

将w设置为固定宽度。同时修改背景绘制区域的起始位置，否则坐标轴会被绘制在背景区域中。

修改228行  checkload（）方法

function checkload() {

              if(options.grid.backgroundImage)

                     if ( bgimage.complete ) {               

                            ctx.save();

                            ctx.restore();

             

                 var pp = ctx.createPattern(bgimage, 'repeat');

                 ctx.fillStyle = pp;

                 ctx.fillRect(45, 0, canvasWidth-47, canvasHeight);

                   draw();

            }

                     else

                            setTimeout( checkload, 100 ) ;

       }

 

 

 

四：y轴可以直接设置yaxis: { ticks: spec ,min:minspec,max:maxspec},

但是x轴的时间需要先转换为UTC再放到数组中。2012/4/12 12:12:12格式转换为UTC代码为

function GetTimeStep(time) {

    day = time.getHours();

 

    time = time.setHours(8 + day);

 

    time = new Date(time);

 

    time = time.getTime();

 

    return time;

 

}

五、只有最后一张显示时间横轴，

  xaxis: { mode: "time", timeformat: "%h:%M", minTickSize: [1, "minute"], show: false },

把不需要x轴的控制图show:FALSE即可。

 

7，切换批次时，根据传入的换批时间绘制换批提示线。增加方法

 

function drawBatchChangeLine(series){

            ctx.save();

            ctx.translate(plotOffset.left, plotOffset.top);

            var axisx=series.xaxis;

            var axisy=series.yaxis;

             var ticks=axisy.ticks;

              var max=axisy.max;

              var min=axisy.min;

              var changeTime=series.BatchChangeTime;

              for (var i = 0; i <changeTime. length; i++) {

                   ctx.moveTo(axisx.p2c(changeTime[i]) , 0);

                    ctx.lineTo(axisx.p2c(changeTime[i]) , plotHeight );

             ctx.stroke();

                       

 

 

}

            

           

                //ctx.stroke();

                   ctx.restore();

        }

该方法在drawSeries()时被调用

 

  function drawSeries(series) {

            if (series.lines.show)

                drawSeriesLines(series);

            if (series.bars.show)

                drawSeriesBars(series);

            if (series.points.show)

                drawSeriesPoints(series);

                drawBatchChangeLine(series);

        }

 

到此，改造基本结束

 

 

 

图中黑线为换批线。红色的竖线为校准线，会随鼠标移动而移动。