基于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函数库-集合框架
Apr 27 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
Nov 04 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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
消息持续发送的完整例子
2006/10/09 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
php过滤敏感词的示例
2014/03/31 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
php处理复杂xml数据示例
2016/07/11 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
python实现文件名批量替换和内容替换
2014/03/20 Python
Python如何快速实现分布式任务
2017/07/06 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
基于python实现把图片转换成素描
2019/11/13 Python
基于python中__add__函数的用法
2019/11/25 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
写好自荐信的技巧
2013/11/08 职场文书
体育教师个人总结
2015/02/09 职场文书
护士先进个人总结
2015/02/13 职场文书
学校食堂管理制度
2015/08/04 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书