Jquery jqplot突出显示堆叠柱形图

我有一张堆积柱形图。 对于高亮显示任何单个切片，我们可以使用“HighlightColor”选项，但如果必须高亮显示整个条，是否有任何选项可用于相同的选项。我当前的代码如下所示：

     seriesDefaults : {
        renderer : $.jqplot.BarRenderer,
        rendererOptions : {
            barWidth : this.barWidth,
            barMargin : this.barMargin,
            highlightColors : '#fffefe'
                 }

需要对其进行修改，以使整个条高亮显示。请告诉我，我为它做了些什么。 解决方案包括在高光画布上进行自定义绘制

它被整合到我为一个问题制作的一个样本中，这个问题问我如何在堆叠条形图的顶部添加总和。我还升级了它的代码，所以现在它是“条形图方向友好”

以防万一，JS代码也如下所示：

$(document).ready(function() {
    var ins = [2, 2, 3, 5];
    var outs = [2, 4, 3, 5];
    var swaps = [2, 2, 6, 5];
    var passes = [2, 4, 6, 5];
    var data = [ins, outs, swaps, passes, [3, 3, 3, 3]];
    var series = [
        {
        label: 'IN',
        pointLabels: {
            labels: [2, 2, 3, 5]
        }},
    {
        label: 'OUT',
        pointLabels: {
            labels: [2, 4, 3, 5]
        }},
    {
        label: 'SWAP',
        pointLabels: {
            labels: [2, 2, 6, 5]
        }},
    {
        label: 'PASS',
        pointLabels: {
            labels: [2, 4, 6, 5]
        }},
    {
        label: 'INVISIBLE',
        pointLabels: {
            labels: ['∑ 8', '∑ 12', '∑ 18', '∑ 20']
        },
        show: false,
        shadowAngle: 90,//for horizontal use (180 istead of 90)
        rendererOptions: {
            shadowDepth: 25,
            shadowOffset: 2.5,
            shadowAlpha: 0.01
        }}
    ];
    var ticks = ['Oi', 'Bike', 'Car', 'Truck'];
    var plot = $.jqplot('chart', data, {
        stackSeries: true,
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                barMargin: 20
//for horizontal uncomment this                
//                ,barDirection: 'horizontal'
            },
            pointLabels: {
                show: true,
                stackedValue: false,
                location: 's'
            }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            }
//for horiozontal use the below instead
/*            
            yaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            }
*/        
        },
        legend: {
            show: true,
            location: 'ne',
            placement: 'outside'
        },
        series: series,
        title: "Oi title"
    });
    //color used for tooltip title
    var color = 'rgb(50%,50%,100%)';
    //start span of a tooltip's title
    var spanStart = '<span style="font-size:14px;font-weight:bold;color:' + color + ';">';
    $('#chart').bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) {
        var chart_left = $('#chart').offset().left;
        var chart_top = $('#chart').offset().top;
        var x = ev.pageX;
        var y = ev.pageY;
        var left = x;
        var top = y;
        var chartTooltipHTML = spanStart;
        if (plot.axes.xaxis.u2p && plot.axes.yaxis.u2p) { // pierenderer do not have u2p
            left = chart_left + plot.axes.xaxis.u2p(data[0]); // convert x axis units to pixels on grid
            top = chart_top + plot.axes.yaxis.u2p(data[1]); // convert y axis units to pixels on grid
        }        
        var barWidth = plot.series[0].barWidth;
        //tells if the bar chart is vertical
        var isVertical = false;
        if (plot.series[0].barDirection === "vertical")
            isVertical = true;
        if (isVertical) left -= barWidth / 2;
        else top -= barWidth / 2;
        //for stacked chart
        if(isVertical){
            top = chart_top;
            var sum = 0;
            for (var i = 0; i < seriesIndex + 1; i++)
               sum += plot.series[i].data[pointIndex][1];
            top += plot.axes.yaxis.u2p(sum); 
        }else{
            left = chart_left;
            var sum = 0;
            for (var i = 0; i < seriesIndex + 1; i++)
               sum += plot.series[i].data[pointIndex][0];
            left += plot.axes.xaxis.u2p(sum); 
        }        
        var seriesName = plot.series[seriesIndex].label;
        console.log("seriesName = " + seriesName + "   seriesIndex = " + seriesIndex + "   pointIndex= " + pointIndex + "   data= "+data+ "   plot.series[seriesIndex].data= " + plot.series[seriesIndex].data[pointIndex]);

        chartTooltipHTML += 'My custom tooltip: </span>' 
        + '<br/><b>Count:</b> ' + data[1] //data[1] has count of movements
        + '<br/><b>Movement type:</b> ' + seriesName;

        //start of part highlighting whole bar --- all bars (other than this bar is related to custom tooltip)
        //for painting just grab the first highlight canvas as there could be 'n' of them where 'n' is the number of series, I think
        var drawingCanvas = $(".jqplot-barRenderer-highlight-canvas")[0];
        var rX = chart_left + plot.axes.xaxis.u2p(data[0]) - $(drawingCanvas).offset().left - barWidth/2;
        var rY = chart_top + plot.axes.yaxis.u2p(data[1]) - $(drawingCanvas).offset().top - barWidth/2;
        var rW = 0;
        var rH = barWidth;        
        if (isVertical){
            rW = rH;
            rH = 0;
        }
        for(var i = 0; i < plot.series.length; i++){
            if (isVertical) {
                rH += plot.series[i].data[pointIndex][1];
            }else{
                rW += plot.series[i].data[pointIndex][0];
            }
        }  
        var canvasLeft = parseInt($(drawingCanvas).css('left'),10);
        var canvasTop = parseInt($(drawingCanvas).css('top'),10);
        if(isVertical){
           rY = plot.axes.yaxis.u2p(rH) - canvasTop;//- $(drawingCanvas).offset().top;
           rH = drawingCanvas.height - plot.axes.yaxis.u2p(rH) + canvasTop;//$(drawingCanvas).css('top').; 
        }else{
           rX = 0; 
           rW = plot.axes.xaxis.u2p(rW) - canvasLeft;  
        }       
        console.log("rX= "+rX+";  rY= "+rY+";  rW= "+rW+";  rH = "+ rH + "  drawingCanvas.height= "+drawingCanvas.height);
        var context = drawingCanvas.getContext('2d');
        context.clearRect(0, 0, drawingCanvas.width, drawingCanvas.height);                  context.strokeStyle = "#000000";
        context.strokeRect(rX, rY, rW, rH);
        //end of part doing custom painting of frame around all bars              

        var ct = $('#chartTooltip');
        ct.css({
            left: left,
            top: top
        }).html(chartTooltipHTML).show();
        if (plot.series[0].barDirection === "vertical") {
            var totalH = ct.height() + ct.padding().top + ct.padding().bottom + ct.border().top + ct.border().bottom;
            ct.css({
                top: top - totalH
            });
        }
    });
    // Bind a function to the unhighlight event to clean up after highlighting.
    $('#chart').bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) {
        $('#chartTooltip').empty().hide();
    });
});​

$（文档）.ready（函数（）{
var-ins=[2,2,3,5]；
变量输出=[2,4,3,5]；
var掉期=[2,2,6,5]；
风险值传递=[2,4,6,5]；
var数据=[输入、输出、交换、传递，[3,3,3]；
变量系列=[
{
标签：'在'，
点标签：{
标签：[2,2,3,5]
}},
{
标签：'OUT'，
点标签：{
标签：[2,4,3,5]
}},
{
标签：“交换”，
点标签：{
标签：[2,2,6,5]
}},
{
标签：“通过”，
点标签：{
标签：[2,4,6,5]
}},
{
标签：“不可见”，
点标签：{
标签：['∑ 8', '∑ 12', '∑ 18', '∑ 20']
},
秀:假,，
阴影角度：90，//水平使用（180/90）
渲染器选项：{
阴影深度：25，
阴影偏移量：2.5，
阴影Alpha:0.01
}}
];
变量ticks=['Oi'、'自行车'、'汽车'、'卡车']；
变量图=$.jqplot（'图表'），数据{
斯塔克系列：没错，
系列默认值：{
渲染器：$.jqplot.blunderer，
渲染器选项：{
保证金：20
//对于横向取消注释，请执行以下操作：
//，b方向：“水平”
},
点标签：{
秀：没错，
stackedValue:false，
地点：'s'
}
},
轴线：{
xaxis：{
渲染器：$.jqplot.CategoryAxisRenderer，
滴答声：滴答声
}
//对于水平方向，请使用下面的选项
/*            
亚克斯：{
渲染器：$.jqplot.CategoryAxisRenderer，
滴答声：滴答声
}
*/        
},
图例：{
秀：没错，
位置：'ne'，
位置：“外部”
},
系列:系列,，
标题：“Oi标题”
});
//用于工具提示标题的颜色
var颜色='rgb（50%，50%，100%）；
//工具提示标题的起始范围
var spanStart=''；
$（“#图表”）.bind（'jqplotDataHighlight'，函数（ev、SerieIndex、pointIndex、data）{
var chart_left=$（'#chart'）.offset（）.left；
var chart_top=$（'#chart'）.offset（）.top；
var x=ev.pageX；
var y=ev.pageY；
左向量=x；
var-top=y；
var chartTooltipHTML=spanStart；
如果（plot.axes.xaxis.u2p&&plot.axes.yaxis.u2p）{//渲染器没有u2p
left=chart_left+plot.axes.xaxis.u2p（数据[0]）；//将x轴单位转换为网格上的像素
top=chart_top+plot.axes.yaxis.u2p（数据[1]）；//将y轴单位转换为网格上的像素
}        
var barWidth=plot.series[0]。barWidth；
//指示条形图是否垂直
var isVertical=假；
if（plot.series[0].barDirection==“垂直”）
isVertical=真；
如果（垂直）左-=条宽/2；
else top-=棒材宽度/2；
//用于堆叠图表
如果（垂直）{
顶部=图表顶部；
var总和=0；
对于（变量i=0；i计数：”+data[1]//data[1]具有移动计数
+“
移动类型：”+序列名称；
//突出显示整个栏的部分开始---所有栏（除此栏外与自定义工具提示相关）
//对于绘画，只需抓取第一张突出显示的画布，因为其中可能有“n”，其中“n”是系列的数量，我认为
var drawingCanvas=$（“.jqplot-blerderer高亮显示画布”）[0]；
var rX=chart_left+plot.axes.xaxis.u2p（数据[0]）-$（drawingCanvas.offset（）.left-barWidth/2；
var rY=chart_top+plot.axes.yaxis.u2p（数据[1]）-$（drawingCanvas.offset（）.top-barWidth/2；
var-rW=0；
var rH=棒宽；
如果（垂直）{
rW=相对湿度；
相对湿度=0；
}
对于（变量i=0；i