12个月份统计分组

/*
     * 根据月份来统计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=" 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>

效果如下：