基于canvasJS在PHP中制作动态图表
程序员文章站
2022-04-09 16:05:54
canvasjs是一个javascript库，用于轻松为网页创建其他类型的图表。例如条形图，饼图，柱形图，面积图，折线图等。让我们以需要创建一个图表的示例为例，在该图表中我们可以显示每月销售和购买的产...
canvasjs是一个javascript库，用于轻松为网页创建其他类型的图表。例如条形图，饼图，柱形图，面积图，折线图等。
让我们以需要创建一个图表的示例为例，在该图表中我们可以显示每月销售和购买的产品。我们将考虑两个数组，我们也可以从数据库中考虑它们。一旦我们从数据库中获取数据并将其存储在数组中，它就可以使用canvasjs轻松绘制动态图形。
创建一个文件并将其保存在项目文件夹中。文件名chart_sample.php包含数组形式的数据，其中第一个数组代表购买的产品，第二个数组代表sols产品列表。现在，使用canvasjs绘制图形。
例如：
<?php
// first array for purchased product
$purchased= array(10, 15, 19, 0, 5, 7, 0, 0, 12, 13, 10, 1);
// second array for sold product
$sold= array(7, 12, 14, 0, 3, 7, 0, 0, 10, 7, 5, 0);
// data to draw graph for purchased products
$datapoints = array(
array("label"=> "jan", "y"=> $purchased[0]),
array("label"=> "feb", "y"=> $purchased[1]),
array("label"=> "march", "y"=> $purchased[2]),
array("label"=> "april", "y"=> $purchased[3]),
array("label"=> "may", "y"=> $purchased[4]),
array("label"=> "jun", "y"=> $purchased[5]),
array("label"=> "july", "y"=> $purchased[6]),
array("label"=> "aug", "y"=> $purchased[7]),
array("label"=> "sep", "y"=> $purchased[8]),
array("label"=> "oct", "y"=> $purchased[9]),
array("label"=> "nov", "y"=> $purchased[10]),
array("label"=> "dec", "y"=> $purchased[11])
);
// data to draw graph for sold products
$datapoints2 = array(
array("label"=> "jan", "y"=> $sold[0]),
array("label"=> "feb", "y"=> $sold[1]),
array("label"=> "march", "y"=> $sold[2]),
array("label"=> "april", "y"=> $sold[3]),
array("label"=> "may", "y"=> $sold[4]),
array("label"=> "jun", "y"=> $sold[5]),
array("label"=> "july", "y"=> $sold[6]),
array("label"=> "aug", "y"=> $sold[7]),
array("label"=> "sep", "y"=> $sold[8]),
array("label"=> "oct", "y"=> $sold[9]),
array("label"=> "nov", "y"=> $sold[10]),
array("label"=> "dec", "y"=> $sold[11])
);
?>
<!doctype html>
<html>
<head>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js">
</script>
<script>
window.onload = function () {
var chart = new canvasjs.chart("chartcontainer", {
animationenabled: true,
title:{
text: "monthly purchased and sold product"
},
axisy: {
title: "purchased",
titlefontcolor: "#4f81bc",
linecolor: "#4f81bc",
labelfontcolor: "#4f81bc",
tickcolor: "#4f81bc"
},
axisy2: {
title: "sold",
titlefontcolor: "#c0504e",
linecolor: "#c0504e",
labelfontcolor: "#c0504e",
tickcolor: "#c0504e"
},
tooltip: {
shared: true
},
legend: {
cursor:"pointer",
itemclick: toggledataseries
},
data: [{
type: "column",
name: "purchased",
legendtext: "purchased",
showinlegend: true,
datapoints:<?php echo json_encode($datapoints,
json_numeric_check); ?>
},
{
type: "column",
name: "sold",
legendtext: "sold",
axisytype: "secondary",
showinlegend: true,
datapoints:<?php echo json_encode($datapoints2,
json_numeric_check); ?>
}]
});
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();
}
}
</script>
</head>
<body>
<div id="chartcontainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。