/* * 根据月份来统计trade里面的入账,支出,总盈利 */ public function countMonth(){ $in = array(); $out = array(); $res = array(); $year = date("Y",time()); $in_sql = 'SELECT SUM(money) AS mon, FROM_UNIXTIME(cdate, "%m") AS m FROM trade WHERE way_type=1 GROUP BY m'; $out_sql = 'SELECT SUM(money) AS mon, FROM_UNIXTIME(cdate, "%m") AS m FROM trade WHERE way_type=0 GROUP BY m'; $res = 'SELECT SUM( IF (way_type>0,money,-money)) AS mon, FROM_UNIXTIME(cdate, "%m") AS m FROM trade GROUP BY m'; $obj = new Table("trade"); $inpdo = $obj->query($in_sql); $outpdo = $obj->query($out_sql); $respdo = $obj->query($res); $inRows = $inpdo->fetchAll(); $outRows = $outpdo->fetchAll(); $resRows = $respdo->fetchAll(); $in = $this->formartMonth($inRows); $out = $this->formartMonth($outRows); $res = $this->formartMonth($resRows); return array(implode(",", $in),implode(",", $out), implode(",", $res), ); } public function formartMonth($rows){ $arr = array(); for($i=1; $i<=12; $i++){ foreach($rows as $v){ if(intVal($v['m']) == $i){ $arr[$i] = $v['mon']; break; } $arr[$i] = 0; } } return $arr; }
结合chart.js插件,html代码:
<div> <ul id="before-bg-color-list" class="simple-list color-list"> <li class="before-fg-emerald padding10 margin10 place-left">收入</li> <li class="before-fg-orange padding10 margin10 place-left">支出</li> <li class="before-fg-red padding10 margin10 place-left">总和</li> </ul> </div> <div style="width: 70%"> <canvas id="canvas"></canvas> </div> <script> var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; var barChartData = { labels : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ], datasets : [ { fillColor : "#008a00", strokeColor : "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data : [ <?php echo $countData?$countData[0]:"0,0,0,0,0,0,0,0,0,0,0,0"; ?> ] }, { fillColor : "#fa6800", strokeColor : "rgba(151,187,205,0.8)", highlightFill : "rgba(151,187,205,0.75)", highlightStroke : "rgba(151,187,205,1)", data : [ <?php echo $countData?$countData[1]:"0,0,0,0,0,0,0,0,0,0,0,0"; ?> ] }, { fillColor : "#ce352c", strokeColor : "rgba(151,187,205,0.8)", highlightFill : "rgba(151,187,205,0.75)", highlightStroke : "rgba(151,187,205,1)", data : [ <?php echo $countData?$countData[2]:"0,0,0,0,0,0,0,0,0,0,0,0"; ?> ] } ] } window.onload = function(){ var ctx = document.getElementById("canvas").getContext("2d"); window.myBar = new Chart(ctx).Bar(barChartData, { responsive : true }); } </script> </div>
效果如下: