負の数値のハイチャートの列の範囲の色を変更します。

Question

HighChartsの問題、特に列の範囲のグラフで問題が発生しています。私は赤いの色をの負のの数字との青のの色のポジティブの番号にしたいと思います。

現在のコードは、間隔が負値を含むものにのみ正値、及びブルー色のバーに赤色を与える：

$(function() { 

    $('#container').highcharts({ 

     chart: { 
      type: 'columnrange', 
      inverted: false 

     }, 

     title: { 
      text: 'Temperature variation by month' 
     }, 

     subtitle: { 
      text: 'Observed in Vik i Sogn, Norway' 
     }, 

     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

     yAxis: { 
      title: { 
       text: 'Temperature (°C)' 
      } 
     }, 

     tooltip: { 
      valueSuffix: '°C' 
     }, 

     plotOptions: { 
      columnrange: { 
       dataLabels: { 
        enabled: true, 
        grouping:true, 
        formatter: function() { 
        if(this.y == 0) 
         return ""; 
        else 
         return this.y; 
        } 
       } 
      } 

     }, 

     legend: { 
      enabled: false 
     }, 

     series: [{ 
      name: 'Temperatures', 
      color: '#FF0000', 
      displayNegative: true, 
      negativeColor: '#0088FF' , 
      data: [ 
       [0, 9.4], 
       [-8.7, 6.5], 
       [-3.5, 9.4], 
       [-1.4, 19.9], 
       [0.0, 22.6], 
       [2.9, 29.5], 
       [9.2, 30.7], 
       [7.3, 26.5], 
       [4.4, 18.0], 
       [-3.1, 11.4], 
       [-5.2, 10.4], 
       [-13.5, 9.8] 
      ] 
     }] 

    }); 

}); 

現在のグラフは次のようになります。

r以下のようにする必要があります必要なesult：

一部・研究した後

Link to fiddle

Answer 1

、ここ@Sebastianから上記のコメントに基づいて結論です：

あなたは、インデックスを追加することで、あなたのDataを変更することができますData[[Index,from,to],[SecondIndex,from,to]などのようなxAxisに一致させることができます。の負の値になると、同じ値にデータData[[IndexForNegative,from,to],[IndexForNegative,from,to]...を設定することができます。

$(function() { 

    $('#container').highcharts({ 

    chart: { 
     type: 'columnrange' 
    }, 

    title: { 
     text: 'Temperature variation by month' 
    }, 

    subtitle: { 
     text: 'Observed in Vik i Sogn, Norway' 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    yAxis: { 
     title: { 
     text: 'Temperature (°C)' 
     } 
    }, 

    tooltip: { 
     valueSuffix: '°C' 
    }, 

    plotOptions: { 
     columnrange: { 
     negativeColor: 'red', 
     threshold: 0, 
     dataLabels: { 
      enabled: true, 
      formatter: function() {    
      } 
     } 
     } 
    }, 

    legend: { 
     enabled: false 
    }, 

    series: [{ 
     name: 'Temperatures', 
     data: [ 
       [0,0,9.4], 
       [1,-8.7,0],[1,0,6.5], //spliting all data that has negative values using the same index 
       [2,-3.5,0],[1,0,9.4], 
       [3,-1.4,0],[2,0,19.9], 
       [4,0.0],[4,0,22.6], 
       [5,2.9, 29.5], 
       [6,9.2, 30.7], 
       [7,7.3, 26.5], 
       [8,4.4, 18.0], 
       [9,-3.1,0],[9,0,11.4], 
       [10,-5.2,0],[10,0,10.4], 
       [11,-13.5,0],[11,0,9.8] 
      ] 
    }]  
    });  
}); 

http://jsfiddle.net/0ns43y47/