Highcharts和JSON格式

Question

我有這樣的代碼在文件中查詢名爲querytojson.php：

if(!$query = @pg_query("SELECT AVG(\"UploadSpeed\") AS \"UploadSpeed\", 
           AVG(\"DownloadSpeed\") AS \"DownloadSpeed\", 
           AVG(\"Latency\") AS \"Latency\", 
           AVG(\"Jitter\") AS \"Jitter\", 
           AVG(\"PacketLoss\") AS \"PacketLoss\" FROM \"ZipPerformance\" ")) 
die("<br>Errore nella query: " . pg_last_error($query)); 

while($row = pg_fetch_assoc($query)){ 
    // aggiungo all'array 
    $risultati[] = $row; 
} 
// stampo a video i risultati formattati secondo la sintassi di JSON 
echo json_encode($risultati); 

JSON數據的格式如下：

[{"UploadSpeed":"0.342153197182936","DownloadSpeed":"4.35602301750153","Latency":"110.290067528565","Jitter":"0.0333323723888251","PacketLoss":"0.164373075044556"}] 

現在我想創建一個與Highcharts庫這樣的圖形，文件名爲index1.html：

$(document).ready(function() { 
     var options = { 

      chart: { 

       renderTo: 'container', 

       defaultSeriesType: 'column' 

      }, 

      title: { 

       text: 'HOBBIT' 

      }, 
      tooltip: { 

      }, 
      labels: { 
       html: 'index.html' 
      }, 

      xAxis: { 
       categories: [] 
      }, 
      yAxis: { 

       title: { 

        text: 'Velocità di connessione' 

       } 

      }, 

      series: [] 

     }; 
}) 

我想通過Ĵ子數據直接到index.html。

Answer 1

我已經做了類似的東西。我做這件事的方式是我在sperate js文件中創建了圖表，並將該圖表稱爲傳遞JSON對象作爲變量的函數。這是我的網站上使用的其中一個腳本的示例。在你的情況下，標籤和值是相同的變量，所以循環迭代是不同的，但這個想法仍然是一樣的。

var chart; 
function pieChart(id, values, labels, animate){ 
    if (animate === undefined){ 
     animate = true; 
    } 
    var arrays = new Array(); 
    for (i=0;i<values.length;i++) { 
     arrays[i] = [labels[i], values[i]]; 
    } 

chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: id, 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false 
    }, 
    credits: { 
     enabled: false 
    }, 
    title: { 
     text: 'Event Occurrence', 
     style: { 
      color: '#000000' 
     } 
    }, 
    tooltip: { 
     formatter: function() { 
      return '<b>'+ this.point.name +'</b>: '+ this.y +' %'; 
     } 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: true, 
       color: '#000000', 
       connectorColor: '#000000', 
       formatter: function() { 
        return '<b>'+ this.point.name +'</b>: '+ this.y +' %'; 
       } 
      } 
     }, 
     series: { 
      animation: animate 
      } 
    }, 
    series: [{ 
     type: 'pie', 
     name: 'Probability', 
     data: arrays 
    }] 
}); 
}