Highcharts 仪表，在 $.getJSON 调用后设置检索数据答案

【问题标题】：Highcharts gauge, set retrieved data after $.getJSON callHighcharts 仪表，在 $.getJSON 调用后设置检索数据
【发布时间】：2014-11-22 16:01:52
【问题描述】：

我很难从 PHP 脚本获取数据并将其设置到仪表图中。我得到了正确的 json 结果，只是不知道如何将它设置为正确的 Highchart 仪表变量（gaugeOptions）。

我想把PHP返回的值放入#container-C_2，所以配置最小值、最大值并在仪表图上设置值。 强文本 我认为在我需要调用的 $.getJSON() 正文中 $('#container-C_2').highcharts( 有一些参数，但不知道如何..

有人可以帮我吗？

非常感谢。

PHP

    $result = array();
    $result['name'][0] = 'A';

    //--some values    
    $result['min'][] = 10;
    $result['max'][] = 50;
    $result['val'][]  = 20;

    $json = array();
    array_push($json,$result);

print json_encode($json);

客户端：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <style type="text/css"> 

        </style>    

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">



        $(document).ready(function() {

    var gaugeOptions = {

        chart: {
            type: 'solidgauge'
        },

        title: null,

        pane: {
            center: ['50%', '100%'],
            size: '100%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            stops: [
                 [0.25, '#DF5353'], // red
                 [0.5, '#DDDF0D'], // yellow
                 [0.75, '#55BF3B'], // green 
            ],
            lineWidth: 0,
            minorTickInterval: null,
            tickPixelInterval: 400,
            tickWidth: 0,
            title: {
                y: -70
            },
            labels: {
                y: 16
            }
        },

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
        }
    };  //-- gaugeOptions


    // The C_1 gauge
    $('#container-C_1').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {
            min: -50,
            max: 50,
            title: {
                text: 'graph 1'
            }
        },

        credits: {
            enabled: false
        },

        series: [{
            name: 'C_1',
            data: [-50],
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                       '<span style="font-size:12px;color:silver">  graph... </span></div>'
            },
            tooltip: {
                valueSuffix: ' graph... '
            }
        }]

    })); 


     // The C_2 gauge
            $('#container-C_2').highcharts(Highcharts.merge(gaugeOptions, {
                yAxis: {
                    min: -50,
                    max: 50,
                    title: {
                        text: 'C_2'
                    }
                },
                series: [

                {
                    name: 'C_2',
                    data: [45],
                    dataLabels: {
                        format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                            ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
                               '<span style="font-size:12px;color:silver"> graph... </span></div>'
                    },
                    tooltip: {
                        valueSuffix: ' graph... '
                    } 
                }

                ]

            })); //--container-C_2


    $.getJSON("query.php", function(json) {

         //this WORKS!
         alert("name, grow_rate: " + json[0]['name'] + ","+ json[0]['val'] );


        //This seems not to have any effect
         gaugeOptions.yAxis.min = json[0]['min'];
         gaugeOptions.yAxis.max = json[0]['max'];
         gaugeOptions.yAxis.title.text = 'JUST SOME TEXT...';

        gaugeOptions.series[0] = {};
        //gaugeOptions.series[0].name = json[0]['name'][0];
        gaugeOptions.series[0].name = json[0]['name'];
        gaugeOptions.series[0].data = json[0]['val'];


//--            stucked here, how can I passed retreived values to the graph?
    // chart = new Highcharts.merge(gaugeOptions);



     });


});  //-- ready()

        </script>


        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
        <script src="http://code.highcharts.com/highcharts-more.js"></script>


<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>

<script src="http://code.highcharts.com/modules/solid-gauge.src.js"></script>

<div style="width: 600px; height: 400px; margin: 0 auto">
    <div id="container-C_1" style="width: 300px; height: 200px; float: left"></div>
    <div id="container-C_2" style="width: 300px; height: 200px; float: left"></div>
</div>



    </head>

    <body>

    </body>
</html>

【问题讨论】：

很久没有使用highcharts了，但是我认为数据应该放在这里（数据：[-50]，）所以像这样（数据： ,) -- 如果 json 数据不包含方括号，您可能需要方括号
在 json_encode($json);添加 JSON_NUMERIC_CHECK 标志。

标签： php jquery ajax highcharts getjson

【解决方案1】：

var point = $('#container-C_2').highcharts().series[0].points[0];
point.update(json[0]['val']);

不是这个

//This seems not to have any effect
gaugeOptions.yAxis.min = json[0]['min'];
gaugeOptions.yAxis.max = json[0]['max'];
gaugeOptions.yAxis.title.text = 'JUST SOME TEXT...';

gaugeOptions.series[0] = {};
//gaugeOptions.series[0].name = json[0]['name'][0];
gaugeOptions.series[0].name = json[0]['name'];
gaugeOptions.series[0].data = json[0]['val'];

【讨论】：