PhP Преобразовать столбец многомерного массива за столбцом?
Я пытаюсь построить диаграмму столбцов диаграммы Google, где каждый столбец представляет собственность (дом) и доход в год от этой собственности. Год будет представлен на оси x, а ось y представляет сумму дохода.
Конечный результат в JS должен выглядеть так:
var columnChartData = google.visualization.arrayToDataTable([
['Year', 'Property 1', 'Property 2'],
['2022', 300, 4000],
['2023', 6000, 8000]
]);
В настоящее время я борюсь с преобразованием моего массива PHP ниже в требуемый формат Google. Как я могу построить столбец массива по столбцу?
array([Property 1] => Array ( [2021] => 353.93 [2022] => 12628.65 [2023] => 12841.57 )
[Property 2] => Array ( [2022] => 370.78 [2023] => 12841.57 ))
требуется JS/GoogleChart:
['Year', 'Property 1', 'Property 2'],
['2022', 300, 4000],
['2023', 6000, 8000]
Не могли бы вы подтвердить, что данные не всегда совпадают с годом? Например, в примере с массивом PHP Property 1 содержит годы, 2021, 2022 и 2023, тогда как Property 2 имеет 2022 и 2023 годы. Если данные настроены таким образом, что все свойства имеют совпадающие годы, это было бы гораздо более выполнимо.
@Cole - я могу убедиться, что данные «полные» и будут иметь 0 для пустых лет.
Ответы 1
Вот один подход. Это в значительной степени зависит от предположения, что для каждого свойства включена запись для Year. Например, мы предполагаем, что n-й элемент Property1 имеет тот же год, что и n-й элемент Property2.
Обратите внимание: если OP управляет источником с помощью SQL или какого-либо другого источника данных, было бы намного проще использовать PIVOT, который доступен во многих СУБД (но, в частности, не в mySQL). Кроме того, может быть полезно использовать структуру построения диаграмм, такую как plotly — мне нравятся примеры с этого веб-сайта, которые показывают нам использование двух отдельных источников данных на одной и той же области графика. Мы могли бы представить себе применение этого, имея набор данных для Property1 и отдельный набор для Property2.
https://plotly.com/javascript/line-charts/
<?php
$data = ["Property1" => [2022=>300, 2023=>6000], "Property2" => [2022=>4000, 2023=>8000]];
// Reshape so that each row consists of [Year, Property1, Property2]
$formattedArray = array_map(function ($year, $prop1, $prop2) {
return [$year, $prop1, $prop2];
},
array_keys($data["Property1"]),
array_values($data["Property1"]),
array_values($data["Property2"]));
// Add a header
$res = array_merge([["Year", "Property1", "Property2"]], $formattedArray);
// Method 2
$keys = array_keys($data);
$res2 = [array_merge(["Year"], $keys)];
// assume each property has the same years
$years = array_keys($data[$keys[0]]);
for ($i = 0; $i<count($years); $i++) {
$thisRow = [$years[$i]];
foreach($data as $prop) {
array_push($thisRow, array_values($prop)[$i]);
}
array_push($res2, $thisRow);
}
print_r($res2);
?>
<html>
<head> <!--Load the AJAX API-->
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js"></script>
<script type = "text/javascript">
let thisData = <?php echo json_encode($res);?>;
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the scatter chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
<?php echo "var chartData = google.visualization.arrayToDataTable(" . json_encode($res2) . ");"?>
// Set chart options
var options = {'title':'Different Properties By Year',
'width':600,
'height':400};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(chartData, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id = "chart_div"></div>
</body>
</html>
Спасибо за вышеупомянутое @Cole. Хотя в принципе это работает, жестко запрограммированное ограничение наличия только двух свойств не сработает для меня. Извиняюсь за то, что не объяснил себя лучше в запросе - пользователь может иметь свойства 1: n. Однако спасибо за предложение использовать plotly. То, что у них есть 2 набора данных, может упростить мне программное извлечение цикла массива на основе года/свойства! До сих пор я использовал tidy.js, смешанный с GoogleCharts, но пересматриваю сюжетный маршрут. Буду обновлять здесь.
@malteseKnight см. редактирование для метода 2. Я чувствую, что, вероятно, есть более эффективные способы сделать это, но он делает то, о чем вы просите.
Было бы легче советовать, если бы числа в ваших выборочных данных совпадали с числами в ожидаемом результате.