JavaScript — использование ассоциативного массива PHP в JS для последующего использования в диаграмме, созданной с помощью chart.js

Question

JavaScript — использование ассоциативного массива PHP в JS для последующего использования в диаграмме, созданной с помощью chart.js

Я использую chart.js для отображения диаграмм У меня есть ассоциативный массив в PHP, который я хотел бы использовать в качестве данных для моей линейной диаграммы.

Вот var_dump того, как выглядит таблица http://i.imgur.com/GBO5S1o.png
Таким образом, ярлык будет СЕЗОН 3 СЕЗОН 2 СЕЗОН 1
и buffseason для SEASON 3 будет в $ Patch-> season [‘Season 3’] [‘buff’] и т. д. Я действительно не знаю, как перевести эти значения в JS, и ниже я попробовал array_keys, который не работает, вероятно, потому что это должен быть цикл foreach с ключом => $

<script>
var labels = <?php echo array_keys($Patch->season); ?>;
var buffseason = <?php echo $Patch->season; ?>;
var nerfseason = <?php echo $Patch->season; ?>;
nerfseason.reverse();
labels.reverse();
buffseason.reverse();

var lineData = {
labels,
datasets : [
{

label: "Buffs",
fillColor : "rgba(128, 222, 87, 0.4)",
strokeColor : "#80DE57",
pointColor : "#80DE57",
pointStrokeColor : "#80DE57",
data: buffseason
},
{
label: "Nerfs",
fillColor : "rgba(222, 91, 84,0.4)",
strokeColor : "#DE5B54",
pointColor : "#DE5B54",
pointStrokeColor : "red",
data : nerfseason
}
]
}
var change_line = document.getElementById('change_line').getContext('2d');
new Chart(change_line).Line(lineData)
</script>

0

chart.js javascript php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Вы можете построить правильную структуру в самом javascript, например, так

// it's not good to rely on reverse() because we are using an ASSOCIATIVE array
// so we get the object's keys and sort them
var labels = Object.keys(input).sort(function (a, b) {
// the substring removes the 'SEASON ' part
// i.e. we sort by the numeric part
return a.substring(7) - b.substring(7);
});
// pick the buff elements in the same order as the labels
var buffseason = labels.map(function (e) {
return input[e].buff;
});
// pick the buff elements in the same order as the labels
var nerfseason = labels.map(function (e) {
return input[e].nerf;
})

var lineData = {
...

где input это ваш JSON-кодированный ассоциативный массив, т.е.

{
'SEASON 3': {
'nerf': 0,
'buff': 2
},
'SEASON 2': {
'nerf': 5,
'buff': 2
},
'SEASON 1': {
'nerf': 9,
'buff': 20
}
}

0