在堆叠条形图+高图表中选定系列上的边框 [英] Border on selected series in Stacked Bar charts + High Charts

问题描述

我使用高图表来呈现堆叠条形图。

当用户点击时，如何在堆积条形图上获得边框在一个特定的系列??我尝试了标记选项，但只选择了一个系列，但我要选择完整的系列。

： -

但是，我想这样： -

解决方案

您可以使用渲染器在后台添加这样的rect： http://jsfiddle.net/3Utat/25/

  mouseOver：function（）{
 var chart = this.series.chart，
r = chart.renderer，
 shape = this.shapeArgs， //形状args为点rect元素
 xAxis = this.series.xAxis，
 yAxis = this.series.yAxis，
y = yAxis.toPixels（this.total），// top left的y位置
x = this.plotX + chart.plotLeft  -  shape.width / 2，//点位置+左偏移+半宽
 height = yAxis.toPixels（yAxis.min） -y; // bottom-top 
 
 if（chart.hoverStack）{
 chart.hoverStack.destroy（）; 
} 
 
 chart.hoverStack = r.rect（x，y，shape.width，height）.attr（{
'stroke-width'：6，// border width 
'stroke'：'black'，// border color 
'fill'：'transparent'//透明填充颜色
}）add（）; 
 
}，
 mouseOut：function（）{
 if（this.series.chart.hoverStack）{
 this.series.chart.hoverStack.destroy（） ; 
 this.series.chart.hoverStack = false; 
} 
} 
  

示例使用 mouseOver 和 mouseOut 事件，但在您的情况下，您可以使用 click p>

I am using High charts for rendering Stacked Bar charts.

How to get the border on a Stacked Bar Chart when the user clicks on a particular series?? I tried marker option but that is selecting only one series, but I want the complete series to be selected.

Currently I am getting like this:-

But, I want like this:-

解决方案

You can use renderer to add such rect in the background: http://jsfiddle.net/3Utat/25/

    mouseOver: function () {
        var chart = this.series.chart,
            r = chart.renderer,
            shape = this.shapeArgs, // shape args for the points rect element
            xAxis = this.series.xAxis,
            yAxis = this.series.yAxis,
            y = yAxis.toPixels(this.total), // top left y-position of the rect
            x = this.plotX + chart.plotLeft - shape.width / 2, // point position + left offset + half width
            height = yAxis.toPixels(yAxis.min) - y; // bottom - top

        if (chart.hoverStack) {
            chart.hoverStack.destroy();
        }

        chart.hoverStack = r.rect(x, y, shape.width, height).attr({
                'stroke-width': 6, //border width
                'stroke': 'black', //border color
                'fill': 'transparent' //transparent fill color
        }).add();

    },
    mouseOut: function () {
        if (this.series.chart.hoverStack) {
            this.series.chart.hoverStack.destroy();
            this.series.chart.hoverStack = false;
        }
    }

Example is using mouseOver and mouseOut events, but in your case, you can use click event instead.

这篇关于在堆叠条形图+高图表中选定系列上的边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！