Changement de couleur de la plage de colonnes Highcharts pour les nombres négatifs

Question

J'ai un problème avec HighCharts plus particulièrement avec le graphique de la gamme des colonnes. J'aimerais avoir rouge couleur pour négatif numéros et bleu couleur pour positif numéros.

Le code actuel donne le rouge la couleur des barres avec Seulement positif et bleu à ceux où l'intervalle contient une négatif valeur :

$(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]
            ]
        }]

    });

});

Le graphique actuel se présente comme suit :

Le résultat souhaité devrait être le suivant :

Lien vers le violon

Answer 1

Après quelques recherches et sur la base du commentaire ci-dessus de @Sebastian, voici la conclusion :

Vous pouvez modifier votre Data en ajoutant l'index qui correspond à l'axe des x, comme suit Data[[Index,from,to],[SecondIndex,from,to] etc... et lorsqu'il s'agit de la négatif vous pouvez définir les valeurs de Data Data[[IndexForNegative,from,to],[IndexForNegative,from,to]... pour la même valeur.

$(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/