NLifeBill第六章月总额报表

这一节主要记录有关月总额报表的实现流程，我使用的报表插件是HighChart.js。我主要是觉得这款插件个人使用是免费的，而且图表种类繁多，样式也很漂亮。

这里我要实现功能也比较简单，首先显示每年里面所有记账月的总额折线图。点击折线图上面的点的时候会进入当前月份里面查看详细的月份的消费图。如图：

当点击图上的点的时候就会进入月份的详细折线图，如：

本来我想在月份的详细报表图上面添加鼠标悬浮的时候显示当天是消费了那些账目的，但是暂时没有实现这个功能，后期会完善这个功能的。

下面主要讲解下代码的实现，至于两次数据从数据库的读取我就不记录了。主要记录有关HighChart.js的使用。两次使用的都是在一个div上面画图，只是填充的数据不一样而已。

视图文件的代码：

  <div ng-controller="mtotalctrl">

      <div class="panel panel-success">
      <div class="panel-heading">年份</div>
      <div class="panel-body">
        <span class="n-add-type" ng-click='show(y.years)' ng-repeat='y in years'>
          {{ y.years }}
        </span>
      </div>
    </div>

    <div id="container" style="min-800px;height:400px"></div>
  </div>

主要实现都是在Angularjs里面：

//月总额报表视图的控制器
app.controller('mtotalctrl', ['$scope', '$http', function($scope, $http){

    //用于存放数据
    var cont = {
        year: new Date().getFullYear()
    };

    $http.get('/year').success(function(data, status, headers, config){
        $scope.years = data.year;
    });

    //初始化
    showYear(cont.year);

    $scope.show = function(year){
        cont.year = year;

        showYear(year);
    };

    //显示年份数据
    function showYear(op){
        //从服务器获取所有类别事件
        $http.get('/yTotals/' + cont.year).success(function(data, status, headers, config){
            var temp = data;

            var x = data.bill.xAxis.split(",");

            $('#container').highcharts({                   //图表展示容器，与div的id保持一致
                chart: {
                    type: 'line'                         //指定图表的类型，默认是折线图（line）
                },
                title: {
                    text: op + '年度账单统计'      //指定图表标题
                },
                xAxis: {
                    categories: eval('(' + data.bill.xAxis + ')')  //指定x轴分组
                },
                yAxis: {
                    title: {
                        text: 'RMB(￥)'                  //指定y轴的标题
                    }
                },
                tooltip: {
                    formatter: function() {  
                        return '<b>'+ this.series.name +'</b><br/>'+  
                        this.x +': '+ this.y +'￥';  
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: true, 
                        point: {     //图上的数据点(这个在线形图可能就直观)
                            events: {
                                click: function(){
                                    showMonth(cont.year, this.category); 
                                }
                            }
                        }
                    }
                },
                series: [{                                 //指定数据列
                    name: '消费',                          //数据列名
                    data: eval('(' + data.bill.series + ')')                      //数据
                }]
            });
        });
    }

    //显示详细月份里面的数据
    function showMonth(year, month){
        //从服务器获取所有类别事件
        $http.get('/mTotals/'+year+'/'+month).success(function(data, status, headers, config){
            var temp = data;

            $('#container').highcharts({                   //图表展示容器，与div的id保持一致
                chart: {
                    type: 'line'                         //指定图表的类型，默认是折线图（line）
                },
                title: {
                    text: year + '年' + month + '月账单统计'      //指定图表标题      //指定图表标题
                },
                xAxis: {
                    categories: eval('(' + data.bill.xAxis + ')')  //指定x轴分组
                },
                yAxis: {
                    title: {
                        text: 'RMB(￥)'                  //指定y轴的标题
                    }
                },
                tooltip: {
                    formatter: function() {  
                        return '<b>'+ this.series.name +'</b><br/>'+  
                        this.x +': '+ this.y +'￥';  
                    }
                },
                series: [{                                 //指定数据列
                    name: '消费',                          //数据列名
                    data: eval('(' + data.bill.series + ')')                      //数据
                }]
            });
        });
    }
    
}]);

数据从服务端发送到客户端的时候都已经处理好了，直接在客户端使用就行了！

至于有关hightchart.js的详细参数，这里有篇文章讲的挺详细的，http://www.cnblogs.com/chiflyzheng/archive/2012/07/26/2610063.html