Javascript 填充到x标签会影响Flot中堆叠条形图的颜色

我正在使用FlotChart和flottickrotor[

jquery.Flot.tickrotor

]插件。 我试图通过绘制一些矩形来调整转子，以在我的x轴标签之间提供一些线。 但是，堆叠图形上的最后一个条形图也填充了我设置为“填充”的颜色。 有人能帮我吗

图为：

以下是我经过调整的代码：

/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */

/*
* flot-tickrotor: flot plugin to display angled X-axis tick labels.
*
* Requires flot 0.7 or higher and a browser supporting <canvas>.
*
* To activate, just set xaxis.rotateTicks to an angle in degrees. Labels
* are rotated clockwise, so if you want the labels to angle up and to the
* right (/) you need to provide an angle > 90. The text will be flipped so
* that it is still right-side-up.
* Angles greater than or equal to 180 are ignored.
*/
(function ($) {
    var options = { };

    function init(plot) {
        // Taken from flot-axislabels.
        // This is kind of a hack. There are no hooks in Flot between
        // the creation and measuring of the ticks (setTicks, measureTickLabels
        // in setupGrid() ) and the drawing of the ticks and plot box
        // (insertAxisLabels in setupGrid() ).
        //
        // Therefore, we use a trick where we run the draw routine twice:
        // the first time to get the tick measurements, so that we can change
        // them, and then have it draw it again.

        var ticks = []; // preserve between draw() calls.
        var font;
        var secondPass = false;
        var rotateTicks, rotateTicksRads, radsAboveHoriz;

        plot.hooks.draw.push(function (plot, ctx) {
            var xaxis; // for convenience
            if (!secondPass) {
                var opts = plot.getAxes().xaxis.options;
                if (opts.rotateTicks === undefined) {
                    return;
                }

                rotateTicks = parseInt(opts.rotateTicks, 10);
                if (rotateTicks.toString() != opts.rotateTicks || rotateTicks >= 180) { // || rotateTicks == 0 
                    return;
                }

                rotateTicksRads = rotateTicks * Math.PI/180;
                if (rotateTicks > 90) {
                    radsAboveHoriz = Math.PI - rotateTicksRads;
                } else {
                    radsAboveHoriz = Math.PI/2 - rotateTicksRads;
                }

                font = opts.rotateTicksFont;
                if (!font) {
                    font = $('.tickLabel').css('font');
                }
                if (!font) {
                    font = 'arial';
                }

                var elem, maxLabelWidth = 0, maxLabelHeight = 0, minX = 0, maxX = 0;

                // We have to clear the ticks option so that flot core
                // doesn't draw ticks superimposed with ours, but we preserve
                // the tick data as xaxis.rotatedTicks so that external code
                // can still get to it.

                // FIXME: It would obviously be better to just interrupt
                // the drawing of the ticks and preserve the 'ticks'
                // property. That probably requires another hook.

                xaxis = plot.getAxes().xaxis;
                ticks = plot.getAxes().xaxis.ticks;
                xaxis.rotatedTicks = ticks;
                opts.ticks = []; // we'll make our own

                var x;
                for (var i = 0; i < ticks.length; i++) {
                  var raber = ticks[i].label.split(" ");
                  elem = $('<span style="font-size:11pt; font:' + font + '">' + ticks[i].label + '</span>');
                  plot.getPlaceholder().append(elem);
                  ticks[i].height = elem.outerHeight(true);
                  ticks[i].width = elem.outerWidth(true);
                  elem.remove();
                  if (ticks[i].height > maxLabelHeight) {
                      maxLabelHeight = ticks[i].height;
                  }
                  if (ticks[i].width > maxLabelWidth) {
                      maxLabelWidth = ticks[i].width;
                  }
                  var tick = ticks[i];
                  // See second-draw code below for explanation of offsets.
                  if (rotateTicks > 90) {
                      // See if any labels are too long and require increased left
                      // padding.
                      x = Math.round(plot.getPlotOffset().left + xaxis.p2c(tick.v))
                          - Math.ceil(Math.cos(radsAboveHoriz) * tick.height)
                          - Math.ceil(Math.cos(radsAboveHoriz) * tick.width);
                      if (x < minX) {
                          minX = x;
                      }
                  } else {
                      // See if any labels are too long and require increased right
                      // padding.
                      x = Math.round(plot.getPlotOffset().left + xaxis.p2c(tick.v))
                          + Math.ceil(Math.cos(radsAboveHoriz) * tick.height)
                          + Math.ceil(Math.cos(radsAboveHoriz) * tick.width);
                      if (x > maxX) {
                          maxX = x;
                      }
                  }
                }

                // Calculate maximum label height after rotating.
                if (rotateTicks > 90) {
                    var acuteRads = rotateTicksRads - Math.PI/2;
                    opts.labelHeight = Math.ceil(Math.sin(acuteRads) * maxLabelWidth)
                                       + Math.ceil(Math.sin(acuteRads) * maxLabelHeight) + 20;
                } else {
                    var acuteRads = Math.PI/2 - rotateTicksRads;
                    // Center such that the top of the label is at the center of the tick.
                    opts.labelHeight = Math.ceil(Math.sin(rotateTicksRads) * maxLabelWidth)
                                       + Math.ceil(Math.sin(acuteRads) * maxLabelHeight) + 20;
                }

                if (minX < 0) {
                  plot.getAxes().yaxis.options.labelWidth = -1 * minX;
                }

                // Doesn't seem to work if there are no values using the
                // second y axis.
                //if (maxX > xaxis.box.left + xaxis.box.width) {
                // plot.getAxes().y2axis.options.labelWidth = maxX - xaxis.box.left - xaxis.box.width;
                //}

                // re-draw with new label widths and heights
                secondPass = true;
                plot.setupGrid();
                plot.draw();
            } else {
                if (ticks.length == 0) {
                    return;
                }
                xaxis = plot.getAxes().xaxis;
                var box = xaxis.box;
                var tick, label, xoffset, yoffset;
                var showWeek = false;
                for (var i = 0; i < ticks.length; i++) {
                    tick = ticks[i];
                    if (!tick.label) {
                        continue;
                    }
                    ctx.save();
                    ctx.font = font;
                    if (rotateTicks <= 90) {
                        // Center such that the top of the label is at the center of the tick.
                        xoffset = -Math.ceil(Math.cos(radsAboveHoriz) * tick.height) - 10;
                        yoffset = Math.ceil(Math.sin(radsAboveHoriz) * tick.height) - 10;
                        ctx.translate(Math.round(plot.getPlotOffset().left + xaxis.p2c(tick.v)) + xoffset,
                                      box.top + box.padding + plot.getOptions().grid.labelMargin + yoffset);
                        ctx.rotate(rotateTicksRads);
                    } else {
                        // We want the text to facing up, so we have to
                        // rotate counterclockwise, which means the label
                        // has to *end* at the center of the tick.
                        xoffset = Math.ceil(Math.cos(radsAboveHoriz) * tick.height)
                                  - Math.ceil(Math.cos(radsAboveHoriz) * tick.width);
                        yoffset = Math.ceil(Math.sin(radsAboveHoriz) * tick.width)
                                  + Math.ceil(Math.sin(radsAboveHoriz) * tick.height);
                        ctx.translate(Math.round(plot.getPlotOffset().left + xaxis.p2c(tick.v) + xoffset),
                                      box.top + box.padding + plot.getOptions().grid.labelMargin + yoffset);
                        ctx.rotate(-radsAboveHoriz);
                    }
                    var ticksMe = tick.label.split(" ");

                    // draw labels
                    var absXoffset = Math.abs(xoffset);
                    var leftPad = 5;
                    ctx.fillText(ticksMe[0], absXoffset - leftPad, 0);
                    if(showWeek){
                        ctx.fillText(ticksMe[1], (xoffset + leftPad) , yoffset * 2);
                        showWeek = false;
                        if(i == ticks.length - 1){
                            var offset = Math.abs(xoffset * 3);
                            ctx.rect(offset - 2, -10, 2 ,(yoffset * 4));
                            ctx.fillStyle = "#868686";
                            ctx.fill();
                        }
                    }
                    else{
                        showWeek = true;
                        ctx.rect(absXoffset - (leftPad * 2) + 2, -10, -2,(yoffset * 4));
                        ctx.fillStyle = "#868686";
                        ctx.fill();
                    }
                    ctx.restore();
                }
            }
        });
    }

    $.plot.plugins.push({
        init: init,
        options: options,
        name: 'tickRotor',
        version: '1.0'
    });
})(jQuery);

/*此源代码表单受Mozilla Public的条款约束
*许可证。2.0. 如果MPL的副本未与此文件一起分发，
*你可以一次买到一个http://mozilla.org/MPL/2.0/. */
/*
*flot tickrotor:flot插件，用于显示有角度的X轴刻度标签。
*
*需要flot 0.7或更高版本，并支持浏览器。
*
*要激活，只需将xaxis.rotaticks设置为以度为单位的角度。标签
*是顺时针旋转的，因此如果希望标签向上倾斜并与
*右（/）您需要提供大于90的角度。文本将被翻转，因此
*它仍然是正面朝上的。
*大于或等于180的角度将被忽略。
*/
（函数（$）{
var选项={}；
函数初始化（绘图）{
//取自flot Axis标签。
//这是一种黑客行为，两者之间没有挂钩
//刻度的创建和测量（设置刻度、测量刻度和刻度）
//在setupGrid（）中）以及记号和打印框的图形中
//（在setupGrid（）中插入标签）。
//
//因此，我们使用了一个技巧，即运行两次绘图例程：
//第一次得到滴答声的测量值，这样我们就可以改变了
//然后让它再画一次。
var ticks=[]；//在draw（）调用之间保留。
var字体；
var secondPass=false；
var rotateTicks、rotateTicksRads、radsAboveHoriz；
plot.hooks.draw.push（功能（plot，ctx）{
var xaxis；//为了方便起见
如果（！第二次通过）{
var opts=plot.getAxes（）.xaxis.options；
if（opts.rotateTicks==未定义）{
返回；
}
rotateTicks=parseInt（选择rotateTicks，10）；
如果（rotateTicks.toString（）！=opts.rotateTicks | | rotateTicks>=180）{/| | rotateTicks==0
返回；
}
rotateTicksRads=rotateTicks*Math.PI/180；
如果（旋转速度>90）{
radsAboveHoriz=Math.PI-旋转ksrads；
}否则{
radsAboveHoriz=Math.PI/2-旋转的ksrads；
}
font=opts.rotaticksfont；
如果（！字体）{
font=$（'.ticklab'）.css（'font'）；
}
如果（！字体）{
字体='arial'；
}
变量元素，maxLabelWidth=0，maxLabelHeight=0，minX=0，maxX=0；
//我们必须清除勾号选项，以便flot core
//不会画出与我们重叠的记号，但我们保留
//标记数据为xaxis.rotatedTicks，以便外部代码
//我仍然可以做到。
//FIXME：显然打断一下会更好
//绘制记号并保留“记号”
//属性。这可能需要另一个钩子。
xaxis=plot.getAxes（）.xaxis；
ticks=plot.getAxes（）.xaxis.ticks；
xaxis.rotatedTicks=刻度；
opts.ticks=[]；//我们自己做
var x；
对于（变量i=0；imaxLabelHeight）{
maxLabelHeight=ticks[i]。高度；
}
if（勾号[i].width>maxLabelWidth）{
maxLabelWidth=ticks[i]。宽度；
}
var tick=ticks[i]；
//有关偏移的解释，请参见下面的第二个绘制代码。
如果（旋转速度>90）{
//查看是否有标签太长，需要增加左侧
//填充物。
x=Math.round（plot.getPlotOffset（）.left+xaxis.p2c（tick.v））
-Math.ceil（Math.cos（radsAboveHoriz）*勾选高度）
-Math.ceil（Math.cos（radsAboveHoriz）*刻度宽度）；
if（xmaxX）{
maxX=x；
}
}
}
//计算旋转后的最大标签高度。
如果（旋转速度>90）{
var acuteRads=旋转Ksrads-Math.PI/2；
opts.labelHeight=Math.ceil（Math.sin（acuteRads）*maxLabelWidth）
+数学中心（数学中心）*maxLabelHeight）+20；
}否则{
var acuteRads=Math.PI/2-旋转ksrads；
//居中，使标签顶部位于刻度的中心。
opts.labelHeight=Math.ceil（Math.sin（rotateticsrads）*maxL