Question

我有这个示例代码，我想在每次事件“ onmessage”时更新图表，但不会更新图表。 console.log（）向我显示回调是使用正确的值执行的，但图表中未显示任何内容。

HTML部分

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript部分：设置选项......

$(document).ready(function () {
            Highcharts.setOptions({
                global: {
                    useUTC: false
                },
                plotOptions: {
                    series: {
                        turboThreshold: 0 // 0 to disable https://api.highcharts.com/highcharts/plotOptions.series.turboThreshold
                    }
                }
            });

创建时间跨度为1小时的图表：

            var chart = Highcharts.chart('container', {
                chart: {
                    type: 'spline',
                    animation: Highcharts.svg, // don't animate in old IE
                    marginRight: 10
                },
                title: {
                    text: 'Live Test.sensor.val'
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150
                },
                yAxis: {
                    title: {
                        text: 'Value'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                          Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                          Highcharts.numberFormat(this.y, 2);
                    }
                },
                legend: {
                    enabled: true
                },
                exporting: {
                    enabled: true
                },
                series: [{
                    name: 'Test.sensor.val',
                    data: (function () {
                        // generate an array of random data
                        var data = [],
                          time = (new Date()).getTime(),
                          i;

                        for (i = -60 * 60; i <= 0; i += 1) { //defines the visible timespan on x axis
                            data.push({
                                x: time + i * 1000,
                                y: null
                            });
                        }
                        return data;
                    }())
                }]
            });

在这里，我希望将值输入图表中，但它不起作用... 只是console.log（）向我显示了值，但图表中没有任何更新。

            var ev = new EventSource("/incommingEventHandler.ashx");
            ev.onmessage = function (e) {
                var dat = e.data;
                var x = (new Date()).getTime(), // current time
                y = dat;
                console.log(x, y); //showing values correctly but no update on chart? Why?
                chart.series[0].addPoint([x, y], true, true);
            };
        });

感谢Dieter

Answer 1

这是我的错。服务器发送的事件接缝将作为字符串传输。因此，我从e.data获得的值来自字符串类型。

我通过parseFloat（y）进行了投射，现在一切正常。

通过EventSource进行的海图实时更新无法正常工作

1 个答案: