基于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 相关文章推荐
图片完美缩放
Sep 07 Javascript
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
微信小程序实现多图上传
Jun 19 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
react项目从新建到部署的实现示例
Feb 19 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 strncasecmp字符串比较的小技巧
2011/01/04 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
python实现关键词提取的示例讲解
2018/04/28 Python
django的settings中设置中文支持的实现
2019/04/28 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
用python批量下载apk
2020/12/29 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
Needle & Thread官网:英国仙女品牌
2018/01/13 全球购物
大学生的创业计划书就该这么写
2014/01/30 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
综合管理员岗位职责
2015/02/11 职场文书
2016年校长新年寄语
2015/08/17 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
Python机器学习之KNN近邻算法
2021/05/14 Python
canvas 中如何实现物体的框选
2022/08/05 Javascript