欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-09 16:05:54
canvasjs是一个javascript库,用于轻松为网页创建其他类型的图表。例如条形图,饼图,柱形图,面积图,折线图等。让我们以需要创建一个图表的示例为例,在该图表中我们可以显示每月销售和购买的产...

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> 
  <div id="chartcontainer" style="height: 300px; width: 100%;"></div> 
</body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。