Получение json-данных из PHP в мой JavaScript для загрузки

65
8

Прошу прощения, если это неправильное место, чтобы спросить об этом.

У меня есть php-скрипт, который возвращает следующее:

[{"label":"0","data":"261"},{"label":"1653","data":"1"},{"label":"1654","data":"6"},{"label":"1655","data":"2"},{"label":"1656","data":"10"},{"label":"1657","data":"5"},{"label":"1658","data":"4"},{"label":"1659","data":"10"},{"label":"1660","data":"5"},{"label":"1661","data":"3"}]

Я хочу называть этот php-скрипт из моего javascript (который затем вызывается из моего html файла) для построения графика с использованием флота.

Похоже, что php-скрипт работает так, как планировалось, для создания вышеупомянутого вывода.

Но я, похоже, не могу правильно присвоить приведенные данные переменной в моем JavaScript. Можете ли вы сказать мне, что я делаю неправильно? Я хочу назначить вывод php переменной, называемой tan, а затем использовать ее как источник круговой диаграммы флота.

var tan = Null
$.ajax({
url:"http://myurl/chartdata2.php",
type:"POST",
dataType: "json",
async:false,
// data:{accountid:Account},
success:function(d){
tan = d;
}
});

И затем, называя мою функцию флота:

  $("#flot-pie-donut").length && $.plot($("#flot-pie-donut"), tan, {
series: {
pie: {
innerRadius: 0.4,
show: true,
stroke: {
width: 0
},
label: {
show: true,
threshold: 0.05
},

}
},
colors: ["#65b5c2","#4da7c1","#3993bb","#2e7bad","#23649e"],
grid: {
hoverable: true,
clickable: false
},
tooltip: true,
tooltipOpts: {
content: "%s: %p.0%"
}
});

Спасибо!

спросил(а) 2021-01-19T16:01:16+03:00 9 месяцев назад
1
Решение
65

Здесь есть две проблемы:

1) Вы должны вызвать plot метод после того, как вы скачали ваши данные в success обратного вызова ajax метода. Теперь вы начинаете строить график до того, как данные вернутся с вызова AJAX.

2) Ваши данные неверно отформатированы. flot нужен один массив массивов массивов данных "массивов данных". И это должны быть цифры вместо строки. Исходя из ваших данных примера

[{"label":"0","data":"261"},{"label":"1653","data":"1"}, ...]

измените его на

[ [ [0, 261], [1653, 1], ... ] ] .

Вы можете сделать это в своем php коде или с помощью javascript. Если вы хотите сделать это с javascript вашего success метод обратного вызова должен выглядеть следующим образом:

success: function(d) {
tan = [[]];
for (var i = 0; i < d.length; i++) {
tan[0].push(parseInt(d[i].label), parseInt(d[i].data));
}
$("#flot-pie-donut").length && $.plot($("#flot-pie-donut"), tan, {
// your original code for the plot method
});
}

ответил(а) 2021-01-19T16:01:16+03:00 9 месяцев назад
65

Я предполагаю, что вы успешно получили данные из ajax-вызова. Поэтому я предполагаю, что это ваша data formatting problem прежде чем она была передана в flot

попробуй это:

var tan = Null
$.ajax({
url:"http://myurl/chartdata2.php",
type:"POST",
dataType: "json",
async:false,
// data:{accountid:Account},
success:function(d){
tan = d;
process(tan);
}
});

var _tan = [];
function process(tan){

for (var i = 0; i < tan.length; i++){

// format the data array into [label,data]
_tan.push([tan[i].label,tan[i].data]);
}
}


Затем в вашем jflot:

$("#flot-pie-donut").length && $.plot($("#flot-pie-donut"), _tan, {
series: {
pie: {
innerRadius: 0.4,
show: true,
stroke: {
width: 0
},
label: {
show: true,
threshold: 0.05
},

}
},
colors: ["#65b5c2","#4da7c1","#3993bb","#2e7bad","#23649e"],
grid: {
hoverable: true,
clickable: false
},
tooltip: true,
tooltipOpts: {
content: "%s: %p.0%"
}
});

ответил(а) 2021-01-19T16:01:16+03:00 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема