HighCharts 3.0 中的两个不同阈值

Question

使用 HighCharts 3.0，现在可以指示高于和低于一个阈值的颜色。像这个例子：

http://jsfiddle.net/highcharts/YWVHx/

以下代码：

$(function () {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function(data) {

        $('#container').highcharts({

            chart: {
                type: 'arearange'
            },

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

            xAxis: {
                type: 'datetime'
            },

            yAxis: {
                title: {
                    text: null
                }
            },

            tooltip: {
                crosshairs: true,
                shared: true,
                valueSuffix: '°C'
            },

            legend: {
                enabled: false
            },

            series: [{
                name: 'Temperatures',
                data: data,
                color: '#FF0000',
                negativeColor: '#0088FF'
            }]

        });
    });

});

是否可以使用第三种颜色设置另一个阈值，例如：

提前感谢您的帮助。

Answer 1

Highcharts 4.1.0（2015 年 2 月）中添加了一项无需“黑客”即可解决此问题的功能，称为区域 (API)。给定的问题可以这样解决，使用区域：

plotOptions: {
    series: {
        zones: [{
            value: 0, // Values up to 0 (not including) ...
            color: 'blue' // ... have the color blue
        },{
            value: 10, // Values up to 10 (not including) ...
            color: 'orange' // ... have the color orange
        },{
            color: 'red' // Values from 10 (including) and up have the color red
        }]
    }
}

查看this JSFiddle demonstration 的外观。

Answer 2

如果您不介意将数据绘制两次，这实际上是可能的。

    $('#container').highcharts({

        chart: {
            type: 'arearange'
        },

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

        xAxis: {
            type: 'datetime'
        },

        yAxis: {
            title: {
                text: null
            }
        },

        tooltip: {
            crosshairs: true,
            shared: true,
            valueSuffix: '°C'
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Temperatures',
            threshold : 0,
            data: data,
            color: 'orange',
            negativeColor: 'blue'
        },
        {
            name: 'Temperatures',
            threshold : 10,
            data: data,
            color: 'red',
            negativeColor: 'transparent'
        }]
    });
});

http://jsfiddle.net/YWVHx/97/

Answer 3

顺便说一句，我可以尝试使用 plotLine，如下所示：

 yAxis: {
                title: {
                    text: 'My Chart'
                },
                plotLines: [{
                    id: 'limit-min',
                    dashStyle: 'ShortDash',
                    width: 2,
                    value: 80,
                    zIndex: 0,
                    label : {
                        text : '80% limit'
                    }
                }, {
                    id: 'limit-max',
                    color: '#008000',
                    dashStyle: 'ShortDash',
                    width: 2,
                    value: 90,
                    zIndex: 0,
                    label : {
                        text : '90% limit'
                    }
                }]
            },

Answer 4

很遗憾，这个选项是不可能的，但您可以在http://highcharts.uservoice.com 中提出您的建议并投票。