canvasJS在PHP中如何制作動態(tài)圖表

發(fā)布時間：2020-08-05 09:41:24 來源：億速云閱讀：178 作者：Leah 欄目：編程語言

今天就跟大家聊聊有關(guān)canvasJS在PHP中如何制作動態(tài)圖表，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

CanvasJS是一個JavaScript庫，用于輕松為網(wǎng)頁創(chuàng)建其他類型的圖表。例如條形圖，餅圖，柱形圖，面積圖，折線圖等。

讓我們以需要創(chuàng)建一個圖表的示例為例，在該圖表中我們可以顯示每月銷售和購買的產(chǎn)品。我們將考慮兩個數(shù)組，我們也可以從數(shù)據(jù)庫中考慮它們。一旦我們從數(shù)據(jù)庫中獲取數(shù)據(jù)并將其存儲在數(shù)組中，它就可以使用canvasJS輕松繪制動態(tài)圖形。

創(chuàng)建一個文件并將其保存在項目文件夾中。文件名chart_sample.php包含數(shù)組形式的數(shù)據(jù)，其中第一個數(shù)組代表購買的產(chǎn)品，第二個數(shù)組代表sols產(chǎn)品列表?，F(xiàn)在，使用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>

看完上述內(nèi)容，你們對canvasJS在PHP中如何制作動態(tài)圖表有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

canvasJS在PHP中如何制作動態(tài)圖表

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽