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

Highcharts 中的高亮点范围

Highlight point range in Highcharts

javascript

highcharts