基于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实现随机返回数组的一个元素
Aug 13 Javascript
javascript 表单的友好用户体现
Jan 07 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
JS实现闪动的title消息提醒效果
Jun 20 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
如何通过js实现图片预览功能【附实例代码】
Mar 30 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
Vue数据双向绑定原理实例解析
May 15 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 stripos()函数及注意事项的分析
2013/06/08 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
php生成rss类用法实例
2015/04/14 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
使用Python对SQLite数据库操作
2017/04/06 Python
Python 列表理解及使用方法
2017/10/27 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
python requests post多层字典的方法
2018/12/27 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
仓库管理专业个人自我评价范文
2013/11/11 职场文书
软件测试专业推荐信
2014/09/18 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
银行贷款委托书范本
2014/10/11 职场文书
公司档案管理制度
2015/08/05 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android