介绍
随着互联网技术的发展,数据可视化已成为现代数据分析和呈现的新趋势,它可以更直观、更生动地展现数据,方便决策者更好地做出决策。
PHP 怎样实现数据可视化?
要实现数据可视化,我们需要使用数据可视化工具。如今市面上数据可视化工具很多,常见的有 Tableau、Power BI、Qlikview等。不过如果我们要使用 PHP 实现数据可视化,可以选择 PHP 的数据可视化工具,如PhpChart,CanvasJS(PHP)等。
使用 CanvasJS(PHP) 实现在线图表数据可视化
CanvasJS(PHP)的安装与部署
1.首先去官网下载需要的文件。
//在HTML中添加以下引用
画布图表
2. 然后创建一个 index.php 文件,之后就可以在这个文件里面进行可视化图表的操作了。
使用 CanvasJS(PHP) 绘制图表
下面是一个简单的例子,该例子用于绘制一条简单曲线图,内容是从数据库中读取的随机数据。
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script type="text/javascript">
$(document).ready(function () {
$.getJSON("getData.php", function (result) {
var data = [];
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "随机数据展示"
},
axisX: {
title: "X标签"
},
axisY: {
title: "Y标签"
},
data: [
{
type: "line",
dataPoints: data
}
]
});
for (var i = 0; i < result.length; i++) {
data.push({
x: result[i].date,
y: result[i].value
});
}
chart.render();
});
});
</script>
</body>
</html>
这段代码中,getData.php语句是从数据库中获取数据:
header("Content-type: application/json");
$con = mysqli_connect("localhost","my_user","my_password","my_db");
$query = mysqli_query($con,"SELECT * FROM `data`");
$data = array();
foreach ($query as $row) {
$data[] = $row;
}
mysqli_close($con);
echo json_encode($data);
?>
饼状图
接下来,让我们看看如何绘制饼状图,一个非常常见的图。
<html>
<head>
<script src = "https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 100%; width: 100%;"></div>
<script type="text/javascript">
$(document).ready(function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
legend:{
horizontalAlign: "left", // left, center ,right
verticalAlign: "top", // top, center, bottom
fontSize: 20,
fontFamily: "Arial"
},
toolTip: {
shared: true
},
data: [{
type: "pie",
showInLegend: true,
toolTipContent: "{name}: <strong>{y} </strong>( #percent% )",
indexLabelFontSize: 16,
indexLabel: "{name} - #percent%",
dataPoints: [
{ y: 65, name: "Apples" },
{ y: 12, name: "Mangoes" },
{ y: 15, name: "Cherries" },
{ y: 10, name: "Oranges" }
]
}]
});
chart.render();
});
</script>
</body>
</html>
饼状图的 HTML 中非常简单,我们只需定义一个曲线图外观的 DIV 容器,然后在Javascript里创建这个新图表,CanvasJS 可以理解的格式来提供数据。Replace the dataPoints in the pie chart with the seriesdefs data from the table using PHP and you have yourself a dynamic chart.
结论
通过这篇文章的介绍,我们了解了数据可视化在企业管理和决策中的重要性,以及如何使用 CanvasJS(PHP)进行在线图表数据可视化,希望大家对 PHP 实现数据可视化有一个大概的认识。