javascript — Как анализировать и передавать данные в мой график Morris.js

Question

javascript — Как анализировать и передавать данные в мой график Morris.js

Я хочу использовать диаграммы Морриса в своем приложении для отображения некоторых данных. Во-первых, позвольте мне показать вам мой JS:

var handleStoreIncomeShareDonutChart = function() {
var green = '#00acac';
var blue = '#348fe2';

Morris.Donut({
element: 'storeincomeshare-donut-chart',
data: [
{label: "Store 1", value: 69},
{label: "Store 2", value: 31}
],
colors: [green, blue],
labelFamily: 'Open Sans',
labelColor: 'rgba(255,255,255,0.4)',
labelTextSize: '12px',
backgroundColor: '#242a30'
});
};

Это фрагмент моего файла charts.js. Этот код работает. Но теперь я хочу добавить данные из моей базы данных.

Я видел разные подходы к этому, но мне кажется, что ничего не работает. dd’ed данные выглядят так:

array:2 [▼
1 => array:2 [▼
"name" => "Store 1""value" => 25
]
2 => array:2 [▼
"name" => "Store 2""value" => 75
]

]

Как мне нужно проанализировать эти данные? И как я могу прикрепить его к моей диаграмме, потому что я не могу использовать стиль синтаксиса blade / php в файлах js.

Спасибо,
Luma

У меня есть обновление! Ваш ответ мне очень помог, но у меня все еще есть небольшая проблема. Я знаю проблему, но не могу сказать, почему это происходит.

Давайте возьмем этот пример данных:

$data = [
[
"label" => "Store 1",
"value" => "75"],
[
"label" => "Store 2",
"value" => "25"],
];

DD-остроумие будет выглядеть так:

array:2 [▼
0 => array:2 [▼
"label" => "Store 1""value" => "75"]
1 => array:2 [▼
"label" => "Store 2""value" => "25"]
]

дела json_encode($data) и дд результат будет выглядеть так:
"[{"label":"Store 1","value":"75"},{"label":"Store 2","value":"25"}]"
или форматированный:

[
{
"label": "Store 1",
"value": "75"},
{
"label": "Store 2",
"value": "25"}

]

Это допустимый JSON и работает с диаграммой morris.js. Но есть кое-что интересное, когда я делаю то же самое со своими данными из БД.

DD’ed это будет выглядеть так:

array:2 [▼
1 => array:2 [▼
"label" => "Store 1""value" => 75
]
2 => array:2 [▼
"label" => "Store 2""value" => 25
]
]

А также json_encode() НЕ будет кодировать его так, как это было выше:

{
"1": {
"label": "Studio Friedberg",
"value": 0
},
"2": {
"label": "Studio Klein-Auheim",
"value": 0
}
}

Это также допустимый JSON, но не принят диаграммой morris.js.
Мне потребовалось некоторое время, чтобы понять, почему это происходит. Вы не можете заметить разницу так хорошо, так что давайте посмотрим на эти две картинки:

Массив с некоторыми примерами данных, которые я добавил
Массив с данными из моей базы данных

Так в чем была моя проблема? У меня был цикл foreach, в котором я устанавливал ключ массива для идентификатора магазина.

1

blade javascript laravel morris.js php

Решение

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

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

Источник

Accepted Answer

Вы можете преобразовать его в правильный формат с помощью array_map и вывести его как переменную в <script> перед загрузкой handleStoreIncomeShareDonutChart файл. Следующий код должен работать в PHP 5.3 и выше.

$data = array(
array(
'name' => 'Store 1',
'value' => 25,
),
array(
'name' => 'Store 2',
'value' => 75,
),
);

$output = array_map(function ($record) {
return array(
'label' => $record['name'],
'value' => $record['value'],
);
}, $data);
echo '<script>var morris_data = ' . json_encode($output) . ';';

1