Highcharts列范围更改负数的颜色

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

    });

});

当前图表如下所示:

所需的结果应该是:

链接到小提琴

Answer 1

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

\n\n

您可以Data通过添加索引来匹配 xAxis 等来修改您的Data[[Index,from,to],[SecondIndex,from,to]...，当涉及到负值时，您可以设置数据Data[[IndexForNegative,from,to],[IndexForNegative,from,to]...为相同的值。

\n\n

$(function() {\n\n  $(\'#container\').highcharts({\n\n    chart: {\n      type: \'columnrange\'\n    },\n\n    title: {\n      text: \'Temperature variation by month\'\n    },\n\n    subtitle: {\n      text: \'Observed in Vik i Sogn, Norway\'\n    },\n\n    xAxis: {\n      categories: [\'Jan\', \'Feb\', \'Mar\', \'Apr\', \'May\', \'Jun\', \'Jul\', \'Aug\', \'Sep\', \'Oct\', \'Nov\', \'Dec\']\n    },\n\n    yAxis: {\n      title: {\n        text: \'Temperature ( \xc2\xb0C )\'\n      }\n    },\n\n    tooltip: {\n      valueSuffix: \'\xc2\xb0C\'\n    },\n\n    plotOptions: {\n      columnrange: {\n        negativeColor: \'red\',\n        threshold: 0,\n        dataLabels: {\n          enabled: true,\n          formatter: function() {               \n          }\n        }\n      }\n    },\n\n    legend: {\n      enabled: false\n    },\n\n    series: [{\n      name: \'Temperatures\',\n      data: [\n                [0,0,9.4],\n                [1,-8.7,0],[1,0,6.5], //spliting all data that has negative values using the same index\n                [2,-3.5,0],[1,0,9.4],\n                [3,-1.4,0],[2,0,19.9],\n                [4,0.0],[4,0,22.6],\n                [5,2.9, 29.5],\n                [6,9.2, 30.7],\n                [7,7.3, 26.5],\n                [8,4.4, 18.0],\n                [9,-3.1,0],[9,0,11.4],\n                [10,-5.2,0],[10,0,10.4],\n                [11,-13.5,0],[11,0,9.8]\n            ]\n    }]    \n  });    \n});\n

\n\n

http://jsfiddle.net/0ns43y47/

\n