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

Question

I am struggling very much with updating my Highcharts line chart vis JSON (actually, JSONP). 我在针对JSON（实际上是JSONP）更新Highcharts折线图时非常费劲。 I just don't get the jQuery code to work with my data and the graph. 我只是没有让jQuery代码与我的数据和图形一起使用。

I have a (possible, could be formatted differently) response from my server side PHP like this: 我从服务器端PHP收到了一个（可能的，格式可能不同）响应，如下所示：

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

The client side then looks like this: 客户端如下所示：

    $(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);
        })

The thing is probably much easier than this. 事情可能比这容易得多。 But I tried a lot of different approaches, many of whom I found here in the search, but in vain. 但是我尝试了许多不同的方法，其中许多是在搜索中找到的，但徒劳无功。 Thanks for any hints. 感谢您的任何提示。

Answer 1

如果您的json是有效的（包含数字值），则无需解析它并为类别等推送值。因此，请将json指向系列对象并在图表中运行。

Answer 2

Thanks to the statement from Sebastian, I reworked my PHP which generates the JSON as well as the client side, and it works perfectly. 感谢Sebastian的声明，我重新设计了PHP，该PHP生成了JSON以及客户端，并且运行良好。 For others having the same issue, here is the correct code: 对于其他有相同问题的人，这里是正确的代码：

The JSON can be verified with JSONlint . 可以使用JSONlint验证JSON。

Server-side: 服务器端：

$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) . ')';

Client-side: 客户端：

<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 个解决方案

解决方案1
1 2014-12-05 11:31:38

解决方案2
1 已采纳 2014-12-05 13:54:31

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

问题描述

2 个解决方案

解决方案1 1 2014-12-05 11:31:38

解决方案2 1 已采纳 2014-12-05 13:54:31

解决方案1
1 2014-12-05 11:31:38

解决方案2
1 已采纳 2014-12-05 13:54:31