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 [1276 просмотров]