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

我非常努力地更新我的Highcharts折线图与JSON（实际上是JSONP）。我只是没有得到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);
        })

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

如果您的 json 被验证（包含数字值），则无需解析它并为类别等推送值。因此，将您的 json 引用到系列对象并在图表中运行。

感谢塞巴斯蒂安的声明，我重新设计了生成JSON和客户端的PHP，它运行良好。对于有相同问题的其他人，这是正确的代码：

JSON可以使用JSONlint进行验证。

服务器端：

$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>

相关内容

最新更新

热门标签：