基于canvasJS在PHP中制作动态图表详解

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>   <p id="chartContainer" style="height: 300px; width: 100%;"></p> </body> </html>

相关学习推荐：PHP编程从入门到精通

更多相关文章

随机推荐