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中突出显示点范围

1 个答案: