如何使用jqplot和堆积条形图更改某一特定条的颜色

好的，解决方案是一个hack，我将在此处显示和描述：

1. 您需要覆盖名为$ .jqplot.BarRenderer.prototype.draw的函数并更改某些行
2. 您需要覆盖名为getStart（sidx，didx，comp，plot，axis）的函数
3. 您需要覆盖名为$ .jqplot.ShapeRenderer.prototype.draw的函数并更改某些行

1 .：

$.jqplot.BarRenderer.prototype.draw = function(ctx, gridData, options, plot) {
   var i;
   // Ughhh, have to make a copy of options b/c it may be
   // modified later.
   var opts = $.extend({}, options);

   .................................
   <other code>
   .................................

   var clr = opts.fillStyle || this.color;
   this._dataColors.push(clr);
   this.renderer.shapeRenderer.draw(ctx, points, opts, i, pos); // changed line

我以将i和pos参数添加到函数中的方式更改了该行。原因是要指示当前的条和条中的位置。

2 .：

function getStart(sidx, didx, comp, plot, axis) {
   // check if sign change
   var seriesIndex = sidx, prevSeriesIndex = sidx - 1, start, prevVal, aidx = (axis === 'x') ? 0 : 1;
   // is this not the first series?
   if (seriesIndex > 0) {
       prevVal = plot.series[prevSeriesIndex]._plotData[didx][aidx];
       // is there a sign change
       if ((comp * prevVal) < 0) {
           start = getStart(prevSeriesIndex, didx, comp, plot, axis);
       }
       // no sign change.
       else {
           start = plot.series[prevSeriesIndex].gridData[didx][aidx];
       }
   }
   // if first series, return value at 0
   else {
       start = (aidx === 0) ? plot.series[seriesIndex]._xaxis.series_u2p(0) : plot.series[seriesIndex]._yaxis.series_u2p(0);
   }
   return start;
}

这里什么都没有改变。您只需要复制函数，因为新的覆盖函数无法从jQPlot库中使用它。

3 .：

$.jqplot.ShapeRenderer.prototype.draw = function(ctx, points, options, currentBar, position) {
    ctx.save();
    var opts = (options != null) ? options : {};
    var fill = (opts.fill != null) ? opts.fill : this.fill;
    var closePath = (opts.closePath != null) ? opts.closePath : this.closePath;
    var fillRect = (opts.fillRect != null) ? opts.fillRect : this.fillRect;
    var strokeRect = (opts.strokeRect != null) ? opts.strokeRect
            : this.strokeRect;
    var clearRect = (opts.clearRect != null) ? opts.clearRect : this.clearRect;
    var isarc = (opts.isarc != null) ? opts.isarc : this.isarc;
    var linePattern = (opts.linePattern != null) ? opts.linePattern
            : this.linePattern;
    var ctxPattern = $.jqplot.LinePattern(ctx, linePattern);
    ctx.lineWidth = opts.lineWidth || this.lineWidth;
    ctx.lineJoin = opts.lineJoin || this.lineJoin;
    ctx.lineCap = opts.lineCap || this.lineCap;
    ctx.strokeStyle = (opts.strokeStyle || opts.color) || this.strokeStyle;
    ctx.fillStyle = opts.fillStyle || this.fillStyle;
    if (currentBar == activeColumn && position == 0) { // adding different color for the specific bar
        ctx.fillStyle = defaultColors[0];
    } else if (currentBar == activeColumn && position == 1) {
        ctx.fillStyle = defaultColors[1];
    } else if (currentBar == activeColumn && position == 2) {
        ctx.fillStyle = defaultColors[2];
    }
    ctx.beginPath();
    if (isarc) {
        ctx.arc(points[0], points[1], points[2], points[3], points[4], true);
        if (closePath) {
            ctx.closePath();
        }
        if (fill) {
            ctx.fill();
        } else {
            ctx.stroke();
        }
        ctx.restore();
        return;
    } else if (clearRect) {
        ctx.clearRect(points[0], points[1], points[2], points[3]);
        ctx.restore();
        return;
    } else if (fillRect || strokeRect) {
        if (fillRect) {
            ctx.fillRect(points[0], points[1], points[2], points[3]);
        }
        if (strokeRect) {
            ctx.strokeRect(points[0], points[1], points[2], points[3]);
            ctx.restore();
            return;
        }
    } else if (points && points.length) {
        var move = true;
        for ( var i = 0; i < points.length; i++) {
            // skip to the first non-null point and move to it.
            if (points[i][0] != null && points[i][1] != null) {
                if (move) {
                    ctxPattern.moveTo(points[i][0], points[i][1]);
                    move = false;
                } else {
                    ctxPattern.lineTo(points[i][0], points[i][1]);
                }
            } else {
                move = true;
            }
        }
        if (closePath) {
            ctxPattern.closePath();
        }
        if (fill) {
            ctx.fill();
        } else {
            ctx.stroke();
        }
    }
    ctx.restore();
};

在这里，您需要检查当前所在的酒吧是否为默认酒吧。该代码的重要部分是：

if (currentBar == activeColumn && position == 0) { // adding different color for the specific bar
    ctx.fillStyle = defaultColors[0];
} else if (currentBar == activeColumn && position == 1) {
    ctx.fillStyle = defaultColors[1];
} else if (currentBar == activeColumn && position == 2) {
    ctx.fillStyle = defaultColors[2];
}

我为该酒吧添加了3种不同的颜色，只是为了获得“更漂亮”的图:)