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

    });

});

当前图表如下所示：

所需的结果应该是：

Link to fiddle

Answer 1

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

您可以通过添加与xAx匹配的索引来修改Data，例如Data[[Index,from,to],[SecondIndex,from,to]等...当涉及否定值时，您可以设置数据{ {1}}获得相同的值。

Data[[IndexForNegative,from,to],[IndexForNegative,from,to]...

http://jsfiddle.net/0ns43y47/

Highcharts列范围更改负数的颜色

1 个答案: