javascript - Highcharts 列范围更改负数的颜色

Question

我遇到了 的问题 Highcharts ，更具体地说是列范围图。我想要红色 的颜色负数 数字和 蓝色 的颜色正数字。

当前代码给出 红色 使用 为条形着色仅限 正值和 蓝色 颜色为区间包含 的那些负数 值(value):

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

    });

});

当前图表如下所示:


需要的结果应该是这样的:



Link to fiddle

Answer 1

经过一些研究并根据@Sebastian 的上述评论得出以下结论:

您可以修改您的Data通过添加索引以匹配 xAxis，如 Data[[Index,from,to],[SecondIndex,from,to]等等...当谈到 负数 可以设置的值 数据 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/