Question

以下是该方案：

我想通过读取名为“data.txt”的文件来更新我的图表。该文件包含以下格式的数据：“0 1 2 3 4 5 6 7”。我可以通过放置按钮并按下它来手动更新我的图表，这非常正常。但是当我在代码中使用“load”事件时，网页不会显示任何内容。它变成了空白。

对此问题的任何帮助将不胜感激！

这是我当前的代码（带有load事件）：

$(function() {
  alert(0);
  $(document).ready(function() {
    Highcharts.setOptions({
        global: {
            useUTC: false
        }
    });

    var chart;
    $('#container').highcharts({
        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];
                        setInterval(function() {
            $.get('data.txt', function(data) { 
                <!--alert(1);-->
                var yaxis = data.split(" ");
                var y = parseInt(yaxis[7]);     
                <!--alert(2);-->
                        var x = (new Date()).getTime(), // current time
                        series.addPoint([x, y], true, true); 
            });
                    }, 5000);
                }
            }
        },
        title: {
            text: 'Live random data'
        },
        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: false
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: 'My data',
            data: {}
        }]
    });
  });
});

</script>
</head>
<body>
          <script src="highcharts/js/highcharts.js"></script>
          <script src="highcharts/js/modules/exporting.js"></script>

          <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

</body>

Answer 1

串联数据应该是一个数组：

series: [{
        name: 'My data',
        data: [] // <--- here
    }]

在Highchart中动态更新数据：加载事件不起作用

1 个答案: