基于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 相关文章推荐
一行代码告别document.getElementById
Jun 01 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
js密码强度实时检测代码
Mar 02 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
Aug 01 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
vue router学习之动态路由和嵌套路由详解
Sep 21 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
Express 配置HTML页面访问的实现
Nov 01 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边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
浅析Python中的join()方法的使用
2015/05/19 Python
python实现黑客字幕雨效果
2018/06/21 Python
Django model序列化为json的方法示例
2018/10/16 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
python实现的发邮件功能示例
2019/09/11 Python
python应用文件读取与登录注册功能
2019/09/23 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
竞选部长演讲稿
2014/04/26 职场文书
2014年药房工作总结
2014/11/22 职场文书
2014年减负工作总结
2014/12/10 职场文书
经典导游欢迎词
2015/01/26 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
python缺失值的解决方法总结
2021/06/09 Python
Mysql排序的特性详情
2021/11/01 MySQL
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android