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 
    }] 
}); 
}