Как разобрать JSON в линейный граф HighCharts?

Question

Я пытаюсь разобрать следующий JSON строку удаленно:

[{"name":"Object1","data":[1,2]},{"name":"Object2","data":[3,4]}] 

Я делаю это с помощью следующего кода:

$(function() { 
    var chart; 
    $(document).ready(function() { 
    var options = { 
     chart: { 
     renderTo: 'container', 
     type: 'line', 
     marginRight: 130, 
     marginBottom: 25 
     }, 
     title: { 
     text: 'hits by time', 
     x: -20 //center 
     }, 
     subtitle: { 
     text: 'Source:', 
     x: -20 
     }, 
     xAxis: { 
     categories: ['8am', '9am', '10am', '11am', '12pm', '1pm', 
     '2pm', '3pm', '4pm', '5pm', '6pm', '7pm'] 
     }, 
     yAxis: { 
     title: { 
      text: 'Hits' 
     }, 
     plotLines: [{ 
      value: 0, 
      width: 1, 
      color: '#808080' 
     }] 
     }, 
     tooltip: { 
     formatter: function() { 
      return '<b>'+ this.series.name +'</b><br/>'+ 
      this.x +': '+ this.y; 
     } 
     }, 
     legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'top', 
     x: -10, 
     y: 100, 
     borderWidth: 0 
     }, 
     series: [] 
    }; 

    $.getJSON('http://localhost:8080/jsonget', function(data) { 

     var series = { 
     data: [] 
     }; 

     $.each(data, function(i,item){ 
     alert(item.name); 
     series.name = item.name; 
     $.each(item.data, function(j,dataitem){ 
      alert(dataitem); 
      series.data.push(parseFloat(dataitem[i]));     
     }); 
     }); 

     options.series.push(series);  

     // Create the chart 
     var chart = new Highcharts.Chart(options); 
    }); 
    }); 
}); 

Диаграмма не оказывает, но так, когда я заменить пульт дистанционного управления для примера CSV на сайте.

Кто-нибудь знает, в чем проблема?

Answer 1

Насколько я могу судить, ваш data, кажется, хорошо сформирован. Таким образом, это должно сделать это:

var chart; 
$.getJSON('http://localhost:8080/UDPver/tagdiscover', function(data) { 
    // Populate series 
    options.series = data;  
    // Create the chart 
    chart = new Highcharts.Chart(options); 
}); 

Answer 2

Проблемы в том, что диаграмма затем перерисовывается. Поэтому, если у вас есть другие линии, которые отключены (из легенды), при обновлении он будет виден. У меня есть 5 строк на моем графике. Он обновляется каждую секунду. Из легенды я могу отключить/удалить некоторые строки из графика. Но используя этот метод выше (он работает), полный график перерисовывается, и все линии снова видны. Можно ли просто обновить серию (строки), а не параметры?

Как это (не работает):

function doAjaxData() { 
      AjaxLoadingIcon(1); 
      $.ajax({ 
       url: getAjaxUrl(1), 
       dataType: 'json', 
       cache: false, 
       async: true, 
       success: function (json) { 
        AjaxLoadingIcon(0); 
        gchartOptions.series = []; 
        gchartOptions.series = json; 
        // gchart = new Highcharts.Chart(gchartOptions); 
        gchart.render(); 
        _updateTimer = window.setTimeout("doAjaxData()", 1000); 
        } 
       } 
      }); 
     } 

Answer 3

Атма. Вы должны написать только dataitem вместо dataitem[i], и он будет работать.

$.each(data, function(i,item){ 
    alert(item.name); 
    series.name = item.name; 
    $.each(item.data, function(j,dataitem){ 
     alert(dataitem); 
     series.data.push(parseFloat(dataitem[i]));     
    }); 
    });