堆疊條形圖中的選定系列上的邊框+高圖表

Question

我使用高圖表來呈現堆疊條形圖。

如何獲得邊框堆積條形圖當用戶點擊某個特定的系列？我試過標記選項，但是隻選擇了一個系列，但我希望選擇完整系列。

目前，我得到這樣的： -

不過，我想是這樣的： -

Answer 1

您可以使用渲染器在後臺添加這樣的矩形： 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; 
     } 
    } 

示例使用的是mouseOver和mouseOut事件，但在您的情況下，您可以使用click事件。

Answer 2

至於建議的帕維爾，正確的小提琴邊境上選擇 堆積條形圖是： -

http://jsfiddle.net/3Utat/26/

click: function() { 
         var chart = this.series.chart, 
          r = chart.renderer, 
          shape = this.shapeArgs, 
          xAxis = this.series.xAxis, 
          yAxis = this.series.yAxis, 
          y = yAxis.toPixels(this.total), 
          x = this.plotX - shape.width/2, 
          height = Math.abs(yAxis.toPixels(yAxis.min) - y); 

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

         chart.hoverStack = r.rect(x, chart.plotWidth+chart.plotLeft-y, shape.width, height).attr({ 
          'stroke-width': 6, 
           'stroke': 'black', 
          fill: 'transparent', 
          transform: 'translate(' + (chart.plotWidth+chart.plotLeft) + ' ' + (chart.plotHeight+chart.plotTop) + ') rotate(90) scale(-1,1)' 
         }).add(); 

        }