javascript - Highcharts 中突出显示点范围

Question

我使用以下代码使用 websocket 连接创建动态 Highchart。有没有办法突出显示(用其他颜色)图表中的选定范围。例如，如果来自 websocket 的值高于 25，则这些值必须采用不同的颜色，直到值降至 25 以下。

chart: {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in old IE
            marginRight: 10,
            events: {
                load: function () {

                    // set up the updating of the chart each second
                    var series = this.series[0];
                    var connection = new WebSocket('ws://localhost:8091');

                    connection.onmessage = function (event) {
                    var x = (new Date()).getTime(), // current time
                            y = parseInt(event.data);
                        series.addPoint([x, y], true, true);


                    };
            //////////////////////////
                }
            }
        },

Answer 1

您可以在plotOptions 中使用threshold 和系列negativeColor 来做到这一点。

plotOptions: {
        spline: {
            threshold: 5
        }
    }

还有

series: {
        ...
        color: '#FF0000',
        negativeColor: '#0088FF'
    }

这是一个示例:DEMO

编辑:您还可以使用plotBands突出显示任何范围内的背景:DEMO