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

【问题标题】：Dymanically Update Data in Highchart: Load Event is not Working在 Highchart 中动态更新数据：加载事件不起作用
【发布时间】：2013-05-13 21:23:09
【问题描述】：

这是场景：

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

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

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

$(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>

【问题讨论】：

您是否尝试在数据点之间放置逗号以查看是否可行？
您的$.get 工作了吗？未注释时会显示警报？控制台中的任何错误？在var x = ... 之后删除多余的, 并放入;。
好吧，我照你说的做了。 $.get 正在工作；警报正在弹出；并且图形标题和轴在那里，但图形在 7 处显示一条暗黑线。控制台给了我 2 个错误：[17:11:05.796] TypeError: n.push is not a function @127.0.0.1/highcharts/js/highcharts.js:214 -- [17: 59:04.472] TypeError: j is undefined @ 127.0.0.1/highcharts/js/highcharts.js:220 知道为什么吗？？？ @PawełFus
@PawełFus 当我删除所有警报时，上述错误被删除，现在我收到一个 css 错误：[18:03:57.992] 未知属性'box-sizing'。声明被放弃。 @127.0.0.1/t.html
@PawełFus 现在，当我每 5 秒更改一次数据时，图表上除了轴和标题之外什么都没有出现。我再次收到这些错误：[18:26:55.981] TypeError: n.push is not a function @localhost/highcharts/js/highcharts.js:214 和 [18:24:40.866] Unknown property 'box-浆纱'。声明被放弃。 @localhost/t.html

标签： jquery html highcharts

【解决方案1】：

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

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

【讨论】：

所以，TypeError 被删除了，但仍然得到 Unknown property 'box-sizing'。声明被放弃。 @ localhost/t.html 和 GET localhost/data.txt [HTTP/1.1 304 Not Modified 1ms] 错误。未绘制图表。 :(
对不起，304 不是错误，我的文件没有改变，但图表似乎仍然无法绘制。
从addPoint() 中删除额外的参数true 并将工作：jsfiddle.net/3bQne/94