当前位置：首页 > PHP教程 > php图像处理 > 列表

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

发布:smiling　来源: PHP粉丝网 　添加日期：2022-07-20 17:34:13　浏览: 评论：0　

CanvasJS是一个JavaScript库，用于轻松为网页创建其他类型的图表。例如条形图，饼图，柱形图，面积图，折线图等。

让我们以需要创建一个图表的示例为例，在该图表中我们可以显示每月销售和购买的产品。我们将考虑两个数组，我们也可以从数据库中考虑它们。一旦我们从数据库中获取数据并将其存储在数组中，它就可以使用canvasJS轻松绘制动态图形。

创建一个文件并将其保存在项目文件夹中。文件名chart_sample.php包含数组形式的数据，其中第一个数组代表购买的产品，第二个数组代表sols产品列表。现在，使用canvasJS绘制图形。

例如：

  1. <?php  
  2.  
  3. // First array for purchased product  
  4.  
  5. $purchased= array(10, 15, 19, 0, 5, 7, 0, 0, 12, 13, 10, 1); 
  6.  
  7.   
  8.  
  9. // Second array for sold product  
  10.  
  11. $sold= array(7, 12, 14, 0, 3, 7, 0, 0, 10, 7, 5, 0); 
  12.  
  13.   
  14.  
  15. // Data to draw graph for purchased products  
  16.  
  17. $dataPoints = array(  
  18.  
  19.   array("label"=> "Jan", "y"=> $purchased[0]),  
  20.  
  21.   array("label"=> "Feb", "y"=> $purchased[1]),  
  22.  
  23.   array("label"=> "March", "y"=> $purchased[2]),  
  24.  
  25.   array("label"=> "April", "y"=> $purchased[3]),  
  26.  
  27.   array("label"=> "May", "y"=> $purchased[4]),  
  28.  
  29.   array("label"=> "Jun", "y"=> $purchased[5]),  
  30.  
  31.   array("label"=> "July", "y"=> $purchased[6]),  
  32.  
  33.   array("label"=> "Aug", "y"=> $purchased[7]),  
  34.  
  35.   array("label"=> "Sep", "y"=> $purchased[8]),  
  36.  
  37.   array("label"=> "Oct", "y"=> $purchased[9]),  
  38.  
  39.   array("label"=> "Nov", "y"=> $purchased[10]),  
  40.  
  41.   array("label"=> "Dec", "y"=> $purchased[11])  
  42.  
  43. ); 
  44.  
  45.   
  46.  
  47. // Data to draw graph for sold products  
  48.  
  49. $dataPoints2 = array(  
  50.  
  51.   array("label"=> "Jan", "y"=> $sold[0]),  
  52.  
  53.   array("label"=> "Feb", "y"=> $sold[1]),  
  54.  
  55.   array("label"=> "March", "y"=> $sold[2]),  
  56.  
  57.   array("label"=> "April", "y"=> $sold[3]),  
  58.  
  59.   array("label"=> "May", "y"=> $sold[4]),  
  60.  
  61.   array("label"=> "Jun", "y"=> $sold[5]),  
  62.  
  63.   array("label"=> "July", "y"=> $sold[6]),  
  64.  
  65.   array("label"=> "Aug", "y"=> $sold[7]),  
  66.  
  67.   array("label"=> "Sep", "y"=> $sold[8]),  
  68.  
  69.   array("label"=> "Oct", "y"=> $sold[9]),  
  70.  
  71.   array("label"=> "Nov", "y"=> $sold[10]),  
  72.  
  73.   array("label"=> "Dec", "y"=> $sold[11])  
  74.  
  75. ); 
  76.  
  77.   
  78.  
  79. ?> 
  80.  
  81. <!DOCTYPE HTML>  
  82.  
  83. <html>  
  84.  
  85. <head>   
  86.  
  87.   <script src="https://canvasjs.com/assets/script/canvasjs.min.js">  
  88.  
  89. </script>  
  90.  
  91.   <script>  
  92.  
  93.     window.onload = function () { 
  94.  
  95.   
  96.  
  97.       var chart = new CanvasJS.Chart("chartContainer", {  
  98.  
  99.         animationEnabled: true,  
  100.  
  101.         title:{  
  102.  
  103.           text: "Monthly Purchased and Sold Product" 
  104.  
  105.         },    
  106.  
  107.         axisY: {  
  108.  
  109.           title: "Purchased",  
  110.  
  111.           titleFontColor: "#4F81BC",  
  112.  
  113.           lineColor: "#4F81BC",  
  114.  
  115.           labelFontColor: "#4F81BC",  
  116.  
  117.           tickColor: "#4F81BC" 
  118.  
  119.         },  
  120.  
  121.         axisY2: {  
  122.  
  123.           title: "Sold",  
  124.  
  125.           titleFontColor: "#C0504E",  
  126.  
  127.           lineColor: "#C0504E",  
  128.  
  129.           labelFontColor: "#C0504E",  
  130.  
  131.           tickColor: "#C0504E" 
  132.  
  133.         },    
  134.  
  135.         toolTip: {  
  136.  
  137.           shared: true 
  138.  
  139.         },  
  140.  
  141.         legend: {  
  142.  
  143.           cursor:"pointer",  
  144.  
  145.           itemclick: toggleDataSeries  
  146.  
  147.         },  
  148.  
  149.         data: [{  
  150.  
  151.           type: "column",  
  152.  
  153.           name: "Purchased",  
  154.  
  155.           legendText: "Purchased",  
  156.  
  157.           showInLegend: true,  
  158.  
  159.           dataPoints:<?php echo json_encode($dataPoints,  
  160.  
  161.               JSON_NUMERIC_CHECK); ?>  
  162.  
  163.         },  
  164.  
  165.         {  
  166.  
  167.           type: "column",    
  168.  
  169.           name: "Sold",  
  170.  
  171.           legendText: "Sold",  
  172.  
  173.           axisYType: "secondary",  
  174.  
  175.           showInLegend: true,  
  176.  
  177.           dataPoints:<?php echo json_encode($dataPoints2,  
  178.  
  179.               JSON_NUMERIC_CHECK); ?>  
  180.  
  181.         }]  
  182.  
  183.       });  
  184.  
  185.       chart.render(); 
  186.  
  187.   
  188.  
  189.       function toggleDataSeries(e) {  
  190.  
  191.         if (typeof(e.dataSeries.visible) === "undefined" 
  192.  
  193.               || e.dataSeries.visible) {  
  194.  
  195.           e.dataSeries.visible = false;  
  196.  
  197.         }  
  198.  
  199.         else {  
  200.  
  201.           e.dataSeries.visible = true;  
  202.  
  203.         }  
  204.  
  205.         chart.render();  
  206.  
  207.       } 
  208.  
  209.   
  210.  
  211.     }  
  212.  
  213. </script>  
  214.  
  215. </head> 
  216.  
  217.   
  218.  
  219. <body>  
  220.  
  221.   <p id="chartContainer" style="height: 300px; width: 100%;"></p>  
  222.  
  223. </body>  
  224.  
  225. </html>

Tags: canvasJS PHP动态图表

分享到：

推荐文章

热门文章

最新评论文章