Highcharts積み上げ範囲Z-インデックス

Question

：（JsFiddleが何らかの理由で、私のためにグラフが表示されていないが、それはhtmlとして動作します）

私は2つの重複範囲を持っていますが、私はにできませんよ1組は青色を前面に、もう1対を前面に持ってきてください。上記の青い範囲が隠れていることを確認するには、「タスク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 
     }] 
    }]