基於canvasJS在PHP中製作動態圖表

阿新 • • 發佈：2020-06-01

CanvasJS是一個JavaScript庫，用於輕鬆為網頁建立其他型別的圖表。例如條形圖，餅圖，柱形圖，面積圖，折線圖等。

讓我們以需要建立一個圖表的示例為例，在該圖表中我們可以顯示每月銷售和購買的產品。我們將考慮兩個陣列，我們也可以從資料庫中考慮它們。一旦我們從資料庫中獲取資料並將其儲存在陣列中，它就可以使用canvasJS輕鬆繪製動態圖形。

建立一個檔案並將其儲存在專案資料夾中。檔名chart_sample.php包含陣列形式的資料，其中第一個陣列代表購買的產品，第二個陣列代表sols產品列表。現在，使用canvasJS繪製圖形。

例如：

<?php 
// First array for purchased product 
$purchased= array(10,15,19,5,7,12,13,10,1);

// Second array for sold product 
$sold= array(7,14,3,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]),"y"=> $sold[1]),"y"=> $sold[2]),"y"=> $sold[3]),"y"=> $sold[4]),"y"=> $sold[5]),"y"=> $sold[6]),"y"=> $sold[7]),"y"=> $sold[8]),"y"=> $sold[9]),"y"=> $sold[10]),"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",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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。