Angularjs折线图从sql获取数据

Question

我的页面中有一个 angularjs 折线图。我使用 chart.js 作为我的图表。我最初拥有的数据是假的，我想从数据库中获取真实的数据。我创建了一个查询，可以获取该特定日期的日期和成员总数。查询如下：

SELECT distinct a.time, COUNT(b.member_id) AS Members
FROM b
Inner JOIN a ON b.mir_id = a.mir_id 
GROUP BY 
a.time order by a.time

这个查询返回这样的数据

我的控制器中有一个折线图代码，如下所示：

$scope.member;
    adminService.getMember()
            .then(function(data){           
                $scope.memberList = data.data.member;
                $scope.member = $scope.memberList;
                console.log($scope.memberList);
                //alert($scope.ptypeList);
                //localStorage.ProductType = JSON.stringify(data.data);
                $rootScope.loader = false;
            });


    $scope.percent = 65;
    $scope.anotherPercent = -45;
    $scope.anotherOptions = {
        animate:{
            duration:0,
            enabled:false
        },
        barColor:'#2C3E50',
        scaleColor:false,
        lineWidth:20,
        lineCap:'circle'
    };

    $scope.percent2 = 25;
    $scope.anotherPercent2 = -45;
    $scope.anotherOptions2 = {
        animate:{
            duration:0,
            enabled:false
        },
        barColor:'#2C3E50',
        scaleColor:false,
        lineWidth:20,
        lineCap:'circle'
    };

    $scope.percent3 = 85;
    $scope.anotherPercent3 = -45;
    $scope.anotherOptions3 = {
        animate:{
            duration:0,
            enabled:false
        },
        barColor:'#2C3E50',
        scaleColor:false,
        lineWidth:20,
        lineCap:'circle'
    };
    //--------------
    $scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
    $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    $scope.data = [
      [65, -59, 80, 81, -56, 55, -40],
      [28, 48, -40, 19, 86, 27, 90]
    ];
    $scope.datasetOverride = [
      {
        label: "Bar chart",
        borderWidth: 1,
        type: 'bar'
      },
      {
        label: "Line chart",
        borderWidth: 3,
        hoverBackgroundColor: "rgba(255,99,132,0.4)",
        hoverBorderColor: "rgba(255,99,132,1)",
        type: 'line'
      }
    ];

       $scope.labels1 = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series1 = ['Series A', 'Series B'];


   $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };

  $scope.datasetOverride1 = [{ yAxisID: 'y-axis-1' }];
  $scope.options1 = {
    scales: {
      yAxes: [
        {
          id: 'y-axis-1',
          type: 'linear',
          display: true,
          position: 'left',
          data: $scope.member
        },

      ]
    }
  }

我很困惑如何将我从数据库中获得的值分配给折线图。我该怎么做？

Answer 1

首先，您应该汇总从数据库返回的数据。使用 SUM() 函数。正确的格式应该是：

Date       | Member 
-------------------
2016-06-23 | 5
2016-06-24 | 10

在控制器中你应该有一个数组。

data = [{Date:"2016-0-23",Member:5},{Date:"2016-06-24",Member:10}];

要创建一个简单的图表，您需要数据和标签。

vm.labels = data.map(function (property) {return propery.Date;});
vm.data = data.map(function (property) {return propery.Member;});

在 HTML 页面上：

<canvas id="line" class="chart chart-line" chart-data="vm.data" chart-labels="vm.labels"></canvas>