Работа с объектом JSONP в Highcharts

0

У меня работает 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 (семь пар имя/данные).

Благодарим за внимание! :)

  • 0
    Проверьте, являются ли возвращенные данные массивом или нет.
  • 0
    JSON нужны двойные кавычки вокруг всех ключей и значений - { "name": "Poqilet" } - ваш console.log(data) ничего не показывает, верно?
Показать ещё 1 комментарий
Теги:
highcharts
jsonp

3 ответа

0
Лучший ответ

Оказывается, данные JSONP не были правильно отформатированы для Highcharts, поэтому я сделал так, чтобы он выглядел следующим образом (с дополнением):

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) поэтому я попытаюсь сделать диаграмму мастер-детали для обработки большого объема данных, но это должно сработать для вас, если у вас есть небольшой набор данных.

Подробнее о том, как форматировать данные в формате Highcharts, можно здесь: http://www.highcharts.com/docs/chart-concepts/series/#1

Поделиться
0

В вашем JSON у вас есть структура серии, а не точки. Потому что вы используете data [] paramter внутри. Другими словами, это должно быть:

options.series = data;
Поделиться
0

Ваш 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 будут массивом.

Поделиться
  • 0
    Я отредактировал OP и внес изменения, как вы предлагаете, но он все еще дает мне пустой Highchart без ошибок в консоли.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню