从数据库中取出最近三十天的数据并生成柱状图的代码

很文博客hinven.com 2022年1月12日08:32:49数据库评论2023027字阅读模式

数据库中取出最近三十天的数据并生成柱状图代码,需要的朋友可以参考下。

在终端用cd 命令进入文件目录

说明:此处例子我是拿项目中的一个例子讲解的。

1、新建一个项目 :用终端输入:zf create project Airline 格式:zf create action project project-name 备注:这些格式可以在终端输入zf 查看

2、新建一个action :zf create action dirgramshow index 格式:zf create action action-name controller-name

3、新建一个 model :zf create db-table flightinformation

action 层代码:indexController.php

  1. public function indexAction ()
  2. {
  3. // action body
  4. $db = new Application_Model_DbTable_Flightinformation();
  5. /*获取最近30天内的数目
  6. * select day(boo_time) as day,count(boo_autoid)as count,boo_time from bookinformation
  7. where flag_pass=0 and date_sub(now(), interval 30 day)<=date(boo_time)
  8. group by DATE_FORMAT(boo_time,'%m %d')
  9. */
  10. $sql = "select DATE_FORMAT(boo_time,'%m-%d') as day,count(boo_autoid)as count from bookinformation " .
  11. "where flag_pass=0 and date_sub(now(), interval 30 day)<=date(boo_time) " .
  12. "group by DATE_FORMAT(boo_time,'%m %d')";
  13. $result = $db->getAllInfo($sql)->fetchAll();
  14. $this->view->result=$result;
  15. }

iew 层代码:dirgramshow.phtml

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>航班折线图</title>
  6. <script language="javascript" type="text/javascript"
  7. src="<?php
  8. echo $this->baseUrl() . '/skin/source/jquery/jquery.js'?>"></script>
  9. <script language="javascript" type="text/javascript"
  10. src="<?php
  11. echo $this->baseUrl() . '/skin/js/ZJPjscharts.js'?>"></script>
  12. </head>
  13. <body>
  14. <div id="graph">Loading graph...</div>
  15. <script type="text/javascript">
  16. var d=new Array();
  17. var color=new Array();
  18. <?php
  19. foreach ($this->result as $key => $value) {
  20. ?>
  21. d.push(new Array('<?php
  22. echo $value['day']?>',<?php
  23. echo $value['count']?>));
  24. color.push('#2D6B96');
  25. <?php
  26. }
  27. ?>
  28. if(d!=""){
  29. //['#2D6B96', '#327AAD', '#3E90C9', '#55A7E3', '#60B6F0', '#81C4F0', '#9CCEF0']
  30. var myData = d;
  31. var colors =color;
  32. var myChart = new JSChart('graph', 'bar');
  33. myChart.setDataArray(myData);
  34. myChart.colorizeBars(colors);
  35. myChart.setTitle('Airline diagram');
  36. myChart.setTitleColor('#8E8E8E');
  37. myChart.setAxisNameX('');
  38. myChart.setAxisNameY('');
  39. myChart.setAxisColor('#C4C4C4');
  40. myChart.setAxisNameFontSize(16);
  41. myChart.setAxisNameColor('#999');
  42. myChart.setAxisValuesColor('#777');
  43. myChart.setAxisColor('#B5B5B5');
  44. myChart.setAxisWidth(1);
  45. myChart.setBarValuesColor('#2F6D99');
  46. myChart.setBarOpacity(0.5);
  47. myChart.setAxisPaddingTop(60);
  48. myChart.setAxisPaddingBottom(40);
  49. myChart.setAxisPaddingLeft(45);
  50. myChart.setTitleFontSize(11);
  51. myChart.setBarBorderWidth(0);
  52. myChart.setBarSpacingRatio(50);
  53. myChart.setBarOpacity(0.9);
  54. myChart.setFlagRadius(6);
  55. myChart.setTooltip(['North America', 'U.S.A and Canada']);
  56. myChart.setTooltipPosition('nw');
  57. myChart.setTooltipOffset(3);
  58. myChart.setSize(616, 321);
  59. /*myChart.setBackgroundImage('<?php
  60. //echo $this->baseUrl() . '/skin/image/ZJPchart_bg.jpg'?>');*/
  61. myChart.draw();
  62. }
  63. </script>
  64. </body>
  65. </html>

model 层代码:Flightinformation.php

  1. <?php
  2. class Application_Model_DbTable_Flightinformation extends Zend_Db_Table_Abstract
  3. {
  4. protected $_name = 'flightinformation';
  5. public function getAllInfo($sql){
  6. $adapter = Zend_Registry::get('db');
  7. $flightinformation = $adapter->query($sql);
  8. return $flightinformation;
  9. }
  10. }

最后的效果图如下:

从数据库中取出最近三十天的数据并生成柱状图的代码

weinxin
扫一扫更精彩
大家的支持是我更新的动力!!!
广告也精彩
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定