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: [] 

     }; 
}) 

Я хотел бы передать J сыну непосредственно до 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 
    }] 
}); 
}