2013-05-12 2 views
1

Вот сценарий:Dymanically Обновление данных в Highchart: Load Event не работает

Я хочу, чтобы обновить схему, чтение из файла под названием «data.txt». Этот файл содержит данные в следующем формате: «0 1 2 3 4 5 6 7». Я могу вручную обновить свою диаграмму, поместив кнопку и нажав ее, и это работает отлично. Но когда я использую событие «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> 
+0

вы пытались поставить запятые между вашими точками данных, чтобы увидеть если это сработает? – Duniyadnd

+0

Работает ли ваш '$ .get'? Оповещения появляются при раскомментировании? Любые ошибки в консоли? После 'var x = ...' удалять дополнительные ',' и put ';'. –

+0

ОК, я сделал то, что сказал. $ .get работает; появляются предупреждения; и название графика и оси есть, но график показывает тусклую черную линию на 7. Консоль дает мне 2 ошибки: [17: 11: 05.796] TypeError: n.push не является функцией @ http://127.0.0.1 /highcharts/js/highcharts.js:214 - [17: 59: 04,472] TypeError: J не определено @ http://127.0.0.1/highcharts/js/highcharts.js:220 Любая идея, почему ???? @ PawełFus –

ответ

1

данные в серии должны быть массивом:

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

Итак, ** TypeError ** удалился, но все еще получил ** Неизвестное свойство 'box-sizing'. Декларация опустилась. @ localhost/t.html ** и ** GET http: //localhost/data.txt [HTTP/1.1 304 Not Modified 1ms] ** ошибки. График не отображается. :( –

+0

Извините, 304 не является ошибкой, мой файл не меняется, но по-прежнему не может выглядеть как график. –

+0

Удалить из 'addPoint()' дополнительные параметры 'true' и будет работать: http://jsfiddle.net/3bQne/ 94/ –

Смежные вопросы