当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 基于canvasJS在PHP中制作动态图表

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

2020年06月14日  | 移动技术网IT编程  | 我要评论

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网