NLifeBill第六章月总额报表

最新推荐文章于 2025-08-22 17:35:53 发布

转载最新推荐文章于 2025-08-22 17:35:53 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Dn9x/p/3571307.html

文章标签：

#数据库

本文介绍使用HighCharts.js插件实现月总额报表的过程。包括年份总额的折线图展示，点击具体月份跳转至该月详细消费图。文章分享了AngularJS控制器中的图表配置与交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

视图文件的代码：

 1   <div ng-controller="mtotalctrl">
 2 
 3       <div class="panel panel-success">
 4       <div class="panel-heading">年份</div>
 5       <div class="panel-body">
 6         <span class="n-add-type" ng-click='show(y.years)' ng-repeat='y in years'>
 7           {{ y.years }}
 8         </span>
 9       </div>
10     </div>
11 
12     <div id="container" style="min-width:800px;height:400px"></div>
13   </div>

主要实现都是在Angularjs里面：

  1 //月总额报表视图的控制器
  2 app.controller('mtotalctrl', ['$scope', '$http', function($scope, $http){
  3 
  4     //用于存放数据
  5     var cont = {
  6         year: new Date().getFullYear()
  7     };
  8 
  9     $http.get('/year').success(function(data, status, headers, config){
 10         $scope.years = data.year;
 11     });
 12 
 13     //初始化
 14     showYear(cont.year);
 15 
 16     $scope.show = function(year){
 17         cont.year = year;
 18 
 19         showYear(year);
 20     };
 21 
 22     //显示年份数据
 23     function showYear(op){
 24         //从服务器获取所有类别事件
 25         $http.get('/yTotals/' + cont.year).success(function(data, status, headers, config){
 26             var temp = data;
 27 
 28             var x = data.bill.xAxis.split(",");
 29 
 30             $('#container').highcharts({                   //图表展示容器，与div的id保持一致
 31                 chart: {
 32                     type: 'line'                         //指定图表的类型，默认是折线图（line）
 33                 },
 34                 title: {
 35                     text: op + '年度账单统计'      //指定图表标题
 36                 },
 37                 xAxis: {
 38                     categories: eval('(' + data.bill.xAxis + ')')  //指定x轴分组
 39                 },
 40                 yAxis: {
 41                     title: {
 42                         text: 'RMB(￥)'                  //指定y轴的标题
 43                     }
 44                 },
 45                 tooltip: {
 46                     formatter: function() {  
 47                         return '<b>'+ this.series.name +'</b><br/>'+  
 48                         this.x +': '+ this.y +'￥';  
 49                     }
 50                 },
 51                 plotOptions: {
 52                     line: {
 53                         dataLabels: {
 54                             enabled: true
 55                         },
 56                         enableMouseTracking: true, 
 57                         point: {     //图上的数据点(这个在线形图可能就直观)
 58                             events: {
 59                                 click: function(){
 60                                     showMonth(cont.year, this.category); 
 61                                 }
 62                             }
 63                         }
 64                     }
 65                 },
 66                 series: [{                                 //指定数据列
 67                     name: '消费',                          //数据列名
 68                     data: eval('(' + data.bill.series + ')')                      //数据
 69                 }]
 70             });
 71         });
 72     }
 73 
 74     //显示详细月份里面的数据
 75     function showMonth(year, month){
 76         //从服务器获取所有类别事件
 77         $http.get('/mTotals/'+year+'/'+month).success(function(data, status, headers, config){
 78             var temp = data;
 79 
 80             $('#container').highcharts({                   //图表展示容器，与div的id保持一致
 81                 chart: {
 82                     type: 'line'                         //指定图表的类型，默认是折线图（line）
 83                 },
 84                 title: {
 85                     text: year + '年' + month + '月账单统计'      //指定图表标题      //指定图表标题
 86                 },
 87                 xAxis: {
 88                     categories: eval('(' + data.bill.xAxis + ')')  //指定x轴分组
 89                 },
 90                 yAxis: {
 91                     title: {
 92                         text: 'RMB(￥)'                  //指定y轴的标题
 93                     }
 94                 },
 95                 tooltip: {
 96                     formatter: function() {  
 97                         return '<b>'+ this.series.name +'</b><br/>'+  
 98                         this.x +': '+ this.y +'￥';  
 99                     }
100                 },
101                 series: [{                                 //指定数据列
102                     name: '消费',                          //数据列名
103                     data: eval('(' + data.bill.series + ')')                      //数据
104                 }]
105             });
106         });
107     }
108     
109 }]);