如何使用 PHP 实现在线图表和数据可视化展示

介绍

随着互联网技术的发展,数据可视化已成为现代数据分析和呈现的新趋势,它可以更直观、更生动地展现数据,方便决策者更好地做出决策。

PHP 怎样实现数据可视化?

要实现数据可视化,我们需要使用数据可视化工具。如今市面上数据可视化工具很多,常见的有 Tableau、Power BI、Qlikview等。不过如果我们要使用 PHP 实现数据可视化,可以选择 PHP 的数据可视化工具,如PhpChartCanvasJS(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 实现数据可视化有一个大概的认识。

后端开发标签