基于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编程从入门到精通

以上就是基于canvasJS在PHP中制作动态图表详解的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！