如何將JSON解析爲HighCharts線圖？

我試圖解析以下JSON字符串遠程：如何將JSON解析爲HighCharts線圖？

[{"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示例。

有誰知道問題是什麼？

來源

2012-04-06 Atma

嗨，你介意如何創建你的json數組嗎？我想弄清楚如何使用php數組來獲取括號。命名的系列等我可以做。謝謝 – Anagio 2013-08-28 18:22:27

據我可以告訴你的data似乎是很好的形成。所以，這應該這樣做：

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

來源

2012-04-06 05:59:42 Alexander

沒有在實踐中嘗試，這看起來對我來說很合適。 – 2012-04-06 06:29:25

如果我有2 y軸？即一個x軸和兩個y軸！ – 2013-04-04 08:28:41

問題是，圖表然後重繪。因此，如果您有其他線路被禁用（來自圖例），那麼當您進行更新時，它將會顯示。我在圖中有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); 
        } 
       } 
      }); 
     }

來源

2013-01-05 00:27:39 Tunlid

真我。你應該只寫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]));     
    }); 
    });

來源

2013-01-11 12:01:25 Laabuelita

如何將JSON解析爲HighCharts線圖？

回答

相關問題