基于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 相关文章推荐
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
jquery显示隐藏元素的实现代码
May 19 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 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桌面中心(四) 数据显示
2007/03/11 PHP
PHP写日志的实现方法
2014/11/05 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
python+Django+apache的配置方法详解
2016/06/01 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
简单易懂的python环境安装教程
2017/07/13 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
Python如何使用字符打印照片
2020/01/03 Python
python中的itertools的使用详解
2020/01/13 Python
简单了解Python write writelines区别
2020/02/27 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
工艺工程师岗位职责
2014/03/04 职场文书
化妆品活动策划方案
2014/05/23 职场文书
学习型班组申报材料
2014/05/31 职场文书
2014年教研工作总结
2014/12/06 职场文书
员工福利申请报告
2015/05/15 职场文书
预备党员党支部意见
2015/06/02 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript