基于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中制作动态图表详解

相关推荐