PHP: как построить на странице диаграмму?
Встроенных средств для этого в языке PHP нет, зато есть canvasjs.com и другие подобные JavaScript API.
Покажем ниже исходник, с помощью которого я изобразил вот такую диаграмму:
Диаграмма на PHP + canvasjs.com (скриншот, фрагмент, наведена мышь)
Код может быть выполнен из любого файла .php в кодировке Юникода UTF-8, по аналогии нетрудно сделать другие красивые анимированные диаграммы.
<?php // Исходные данные для графиков 1, 2 $purchased= array(10, 15, 19); $sold= array(7, 12, 14); //Точки данных для графиков 1, 2 $dataPoints = array( array("label"=> "Янв", "y"=> $purchased[0]), array("label"=> "Фев", "y"=> $purchased[1]), array("label"=> "Мар", "y"=> $purchased[2]) ); $dataPoints2 = array( array("label"=> "Янв", "y"=> $sold[0]), array("label"=> "Фев", "y"=> $sold[1]), array("label"=> "Мар", "y"=> $sold[2]) ); ?> <!DOCTYPE HTML> <html lang="ru"> <head> <meta charset="utf-8"> <title>Диаграмма на PHP + canvasjs</title> </head> <body> <div id="chartContainer" style="margin: auto; height: 300px; width: 450px;"></div> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <script> window.addEventListener ('load', function (e) { var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, title:{ text: "Покупка и продажа по месяцам" }, axisY: { title: "Куплено", titleFontColor: "red", //заголовок ряда lineColor: "#803333", //линия оси labelFontColor: "#806666", //метки оси tickColor: "orange" //отметки на оси }, axisY2: { title: "Продано", titleFontColor: "blue", lineColor: "#333380", labelFontColor: "#666680", tickColor: "pink" }, toolTip: { shared: true }, legend: { cursor:"pointer", itemclick: toggleDataSeries }, data: [{ type: "column", name: "Куплено", //на вспывающей подписи legendText: "Куплено", //на легенде showInLegend: true, dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?> }, { type: "column", name: "Продано", legendText: "Продано", axisYType: "secondary", showInLegend: true, dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?> }] }); //chart chart.render(); function toggleDataSeries(e) { if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { e.dataSeries.visible = false; } else { e.dataSeries.visible = true; } chart.render(); } }); // window.addEventListener, 'load' </script> </body></html>
Обратите внимание, что в примере есть дополнительная ось Y (axisYType: "secondary"
), можно было, конечно, использовать и одну ось, убрав эту строку.
Также можно обойтись и без PHP, работая с JS-фреймворком непосредственно из разметки HTML, как в этой статье.
19.08.2020, 22:35 [1277 просмотров]