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

        };
})

我想将 json 数据直接传递给index.html。

Answer 1

我做过类似的事情。我这样做的方式是在一个单独的 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
    }]
});
}