Highcharts堆積範圍Z指數

Question

望着這script：（的jsfiddle不顯示圖形對我來說，出於某種原因，但它可以作爲HTML）

我有兩個重疊的範圍，但我不能有一雙藍色的前面，另一個黑色。點擊「任務2」查看上面的藍色範圍是隱藏的。

我試過使用z-index選項，但我只能按系列而不是按配對來設置它。

全碼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/highcharts-more.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<div id="container1" style="min-width: 400px; height: 200px; margin: 0 auto"></div> 

<div id="container2" style="min-width: 400px; height: 200px; margin: 0 auto"></div> 

<script> 
$(function() { 

    window.chart1 = new Highcharts.Chart({ 

     chart: { 
      renderTo: 'container1', 
      type: 'columnrange', 
      inverted: true 
     }, 

     title: { 
      text: "Top Chart" 
     }, 

     xAxis: { 
      categories: ['Customer A', 'Customer B'] 
     }, 

     yAxis: { 
      labels: { 
       formatter: function() { 
        return Math.abs(this.value); 
       } 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' + 
        'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0); 
      } 
     }, 

     legend: { 
      enabled: true 
     }, 

     plotOptions: { 
      columnrange: { 
       grouping: false 
      } 
     }, 

     series: [{ 
      name: 'Task 1', 
      stack: 'Tasks', 
      data: [{ 
       x: 0, 
       low: -5, 
       high: 5 
      }, { 
       x: 1, 
       low: -15, 
       high: 15 
      }] 
     }, { 
      name: 'Task 2', 
      stack: 'Tasks', 
      data: [{ 
       x: 0, 
       low: -10, 
       high: 10 
      }, { 
       x: 1, 
       low: -3, 
       high: 3 
      }] 
     }] 

    }); 


}); 
</script> 

Answer 1

一個爲實現這一目標的方法是提供pointPadding在圖中的特定系列。該選項允許兩個條形圖都可見，即使它們彼此重疊。

plunker演示

series: [{ 
     name: 'Task 1', 
     stack: 'Tasks', 
     data: [{ 
      x: 0, 
      low: -5, 
      high: 5 
     }, { 
      x: 1, 
      low: -15, 
      high: 15 
     }] 
    }, { 
     name: 'Task 2', 
     stack: 'Tasks', 
     pointPadding: 0.3, /*pointPadding to specific series*/ 
     data: [{ 
      x: 0, 
      low: -10, 
      high: 10 
     }, { 
      x: 1, 
      low: -3, 
      high: 3 
     }] 
    }]