JSON Arrays и Google Charts - PullRequest
Новая
       6

JSON Arrays и Google Charts

0 голосов
/ 13 мая 2018

У меня есть JSON-канал из двух массивов, и я изо всех сил пытаюсь заставить его показать диаграмму.Я пытаюсь отобразить мультисерийный график. Я не могу разобраться с ним. 

{
"Protein": [{
    "Count": 2,
    "Day": "Friday",
    "Type": "Protein"
}, {
    "Count": 3,
    "Day": "Monday",
    "Type": "Protein"
}, {
    "Count": 2,
    "Day": "Saturday",
    "Type": "Protein"
}, {
    "Count": 1,
    "Day": "Sunday",
    "Type": "Protein"
}, {
    "Count": 3,
    "Day": "Thursday",
    "Type": "Protein"
}, {
    "Count": 2,
    "Day": "Tuesday",
    "Type": "Protein"
}, {
    "Count": 2,
    "Day": "Wednesday",
    "Type": "Protein"
}],
"Hec": [{
    "Count": 2,
    "Day": "Friday",
    "Type": "HEC"
}, {
    "Count": 3,
    "Day": "Monday",
    "Type": "HEC"
}, {
    "Count": 1,
    "Day": "Saturday",
    "Type": "HEC"
}, {
    "Count": 1,
    "Day": "Sunday",
    "Type": "HEC"
}, {
    "Count": 1,
    "Day": "Thursday",
    "Type": "HEC"
}, {
    "Count": 1,
    "Day": "Tuesday",
    "Type": "HEC"
}, {
    "Count": 2,
    "Day": "Wednesday",
    "Type": "HEC"
}]
}

Как мне пройти через них в вызове Ajax в диаграммах Google.Я добавил JS здесь JSFiddle

Я проверял консоль в Chrome, и я вижу, как проходит JSON.Когда я пытаюсь повторить и добавить .Rows, он говорит мне, что это data.addROw не является функцией

Ответы [ 2 ]

0 голосов
/ 14 мая 2018

Будучи новичком в JSON, мне потребовалось немного времени, чтобы разобраться с этим. Но вот мой ответ, чтобы добавить несколько рядов из JSON в Google Charts (как выше отформатирован мой канал JSON). 

 success: function (d) {        
               data.addColumn('string', 'Day');                 

               for (j = 0; j < Object.keys(d).length; j++) {                      
                   data.addColumn('number', Object.keys(d)[j]);                         
               };

               for (i = 0; i < 7; i++) { 
                   data.addRow([d.Protein[i].Day, d.Protein[i].Count, d.Hec[i].Count, d.Lec[i].Count, d.F[i].Count]);
               };
            }

Я протестировал его, добавив новые ключи в JSON, и он автоматически обновляется и показывает четыре серии на графике. Была проблема с нулевыми значениями, но я решил эту проблему в БД, добавив все дни недели для всех рядов, так что в неделе всегда будет семь дней.

0 голосов
/ 13 мая 2018

Я вижу эту строку в вашем коде Fiddle: 

success: function(data) {

Что происходит, так это то, что данные, определенные в этой функции, перезаписывают данные, которые вы определили ранее для dataTable. Таким образом, данные в этом контексте на самом деле относятся к данным ответа AJAX, а не к таблице данных. Вы должны либо дать обратному вызову успеха другое имя переменной для данных, либо изменить имя переменной таблицы данных, чтобы 2 не сталкивались.

...