Question

我正在从我的服务器传递JSONP。 JSONP（带有$ .getJSON填充）如下所示：

        jQuery21009647691948339343_1398527630522([
{
"name": 'World Federation of Democratic Youth',
"data": [16]
},
{
"name": 'Poqilet',
"data": [13]
},
{
"name": 'United Society',
"data": [8]
},
{
"name": 'Japvia',
"data": [589]
},
{
"name": 'the Mars',
"data": [1]
},
{
"name": 'The Americas',
"data": [913]
},
{
"name": 'High Orion Alliance',
"data": [1]
}
])

我用来将此传递给我的客户端的PHP脚本是：

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

$array = (file_get_contents('data.json'));   
echo $_GET['callback']. '('. ($array) . ')';

现在，当我得到这个对象时，我想将它放入Highcharts系列

$(document).ready(function () {
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Update Order'
},
xAxis: {
categories: ['Regions']
},
yAxis: {
min: 0,
title: {
text: 'Number of Nations'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{}]
};
var url = "http://myserver.org/requestjsonp.php?callback=?";
$.getJSON(url, function (data) {
console.log(data);
options.series.data = data;
var chart = new Highcharts.Chart(options);
});
});

这不起作用，我不明白为什么，因为我已经解决了之前遇到的错误。现在我在控制台中没有出错，我什么都没得到。

如果我将JSON的内容粘贴到系列中，我得到了我想要的东西，尽管我必须取出第一个“{”和最后一个“}”字符。这是问题吗？如果要求它们在JSON中以便它可以传递给客户端，如何从对象中删除它们？

.remove()以及我收到数据后试图修剪数据的其他jquery方法无效。

console.log（data）现在提供了一个包含7个对象的数组，我相信这些对象与data.json（七个名称/数据对）一致。

感谢您的考虑！：）

Answer 1

您的JSONP不正确。没有填充，它看起来像：

{
    name: 'World Federation of Democratic Youth',
    data: [16]
},
{
    name: 'Poqilet',
    data: [13]
},

这不是有效的JSON。它应该看起来像：

[{
    "name": "World Federation of Democratic Youth",
    "data": [16]
},
{
    "name": "Poqilet",
    "data": [13]
}]

您可能只想options.series = data，因为data将是一个数组。

Answer 2

在你的JSON中你有结构系列，而不是点数。因为你在里面使用data []参数。换句话说，它应该是：

options.series = data;

Answer 3

事实证明，对于Highcharts，JSONP数据格式不正确，所以我所做的就是这样（带填充）：

jQuery21009184384981635958_1398737380163([{"name": "Regions","data": ["World Federation of Democratic Youth", "Poqilet", "United Society", "Japvia", "the Mars", "The Americas", "High Orion Alliance"]},{"name": "Number of Nations","data": [16, 13, 5, 566, 1, 926, 1]}])

使用它的Javascript：

$(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'Update Order',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'Number of Nations'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: []
            }

            $.getJSON('http://myserver.org/requestjsonp.php?callback=?', function(data) {
                options.xAxis.categories = data[0]['data'];
                options.series[0] = data[1];
                chart = new Highcharts.Chart(options);
            });
        });

这适用于我发布的小型JSONP摘录，但不适用于我的完整数据集，其中包含超过10,000个值并且抛出了Highcharts Error 19（http://www.highcharts.com/errors/19）消息，因此我将尝试做一个主 - 详细图表来处理大量数据，但如果你有一个小数据集，这应该适合你。

有关如何格式化高等数据数据的更多信息，请访问：http://www.highcharts.com/docs/chart-concepts/series/#1

在Highcharts中使用JSON对象

3 个答案: