Question

我在使用JSON（实际上是JSONP）更新我的Highcharts折线图时非常努力。我只是没有得到jQuery代码来处理我的数据和图表。

我的服务器端PHP有一个（可能的，格式可能不同）响应，如下所示：

    [{  "name": "France",
        "data": [[1960,520325],
                 [1961,548976],
                 [1962,585604],
                 ...
                ]
     },{"name": "Germany",
        "data": [[1960,62718],
                 [1961,83872],
                 [1962,99201],
                 ...
                ]
     },{"name": ...

客户端看起来像这样：

    $(document).ready(function() {
        var options = {
            chart: {
                renderTo: 'container',
                type: 'spline'
            },
            series: []
        };


        var url =  "http://xxx/jsonp_response.php?callback=?";


        $.getJSON(url, {selectedCountries: "France,Germany,Switzerland", type: "jsonp"})
        .done(function(data)
        {
            // Split the data string into "name" and "data"
            $.each(data, function(name, values)
            {
                var items = values.toString().split(",");

                //now, name is for category
                options.series[].name = name;


                $.each (items, function(year, value)
                {
                    // now, categories
                    options.xAxis.categories = year;

                    // now, values
                    options.series[].data = value;
                });
            });            

            var chart = new Highcharts.Chart(options);
        })

事情可能比这容易得多。但是我尝试了很多不同的方法，其中许多是我在搜索中找到的，但是徒劳无功。感谢任何提示。

Answer 1

如果你的json是有效的（包含数值），你不需要解析它并推送类别等的值。所以请将你的json引用到系列对象并在图表中运行。

Answer 2

感谢Sebastian的声明，我重新编写了我的PHP，它生成了JSON以及客户端，并且它完美地运行。对于具有相同问题的其他人，这里是正确的代码：

可以使用JSONlint验证JSON。

服务器端：

$values = array();
$values[] = array(2000,20);
$values[] = array(2001,10);
$values[] = array(2002,12);

$data[] = array("name" => "Germany", "data" => $values);    

unset($values);
$values[] = array(2000,8);
$values[] = array(2001,4);
$values[] = array(2002,10);

$data[] = array("name" => "France", "data" => $values); 

header("content-type: application/json"); 

echo $_GET['callback']. '('. json_encode($data) . ')';

客户端：

<body>

    <div id="container" style="width: 600px; height: 400px;"></div>

    <script type="text/javascript">

        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'spline'
                },
                series: [{}]
            };


            var url =  "http://xxx/jsonp_response.php?callback=?";


            $.getJSON(url, {selectedCountries: "Germany,France", type: "jsonp"})
                .done(function(data)
                {
                    options.series = data;
                    var chart = new Highcharts.Chart(options);
                })
                .fail(function(jqxhr, textStatus, error) 
                {
                    var err = textStatus + ", " + error;
                    console.log( "Request Failed: " + err );
                })
        });

    </script> 

</body>

如何通过JSON更新多个系列的Highcharts？

2 个答案: