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


Posted in Javascript onMay 30, 2020

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>

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

Javascript 相关文章推荐
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
让FireFox支持innerText的实现代码
Dec 01 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
常用jQuery选择器总结
Jul 11 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
jQuery的文档处理程序详解
May 10 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
jQuery实现视频展示效果
May 30 #jQuery
vue实现购物车加减
May 30 #Javascript
基于vue和bootstrap实现简单留言板功能
May 30 #Javascript
JS常见内存泄漏及解决方案解析
May 30 #Javascript
react结合bootstrap实现评论功能
May 30 #Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 #jQuery
JavaScript类的继承多种实现方法
May 30 #Javascript
You might like
PHP 中执行系统外部命令
2006/10/09 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
golang与PHP输出excel示例
2016/07/22 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Python 切分数组实例解析
2019/11/07 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
python读取mysql数据绘制条形图
2020/03/25 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
C语言中break与continue的区别
2012/07/12 面试题
EJB timer的种类
2014/10/28 面试题
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
应届生求职自荐信
2014/07/04 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers