Angularjs 꺾은 선형 차트 SQL에서 데이터를 얻으십시오

내 페이지에 angularjs 꺾은 선형 차트가 있습니다. 차트로 chart.js를 사용하고 있습니다. 내가 처음에 가지고있는 데이터는 가짜이며 데이터베이스에서 실제 데이터를 가져오고 싶습니다. 특정 날짜에 날짜와 총 구성원 수를 얻을 수있는 쿼리를 만들었습니다. 쿼리는 다음과 같이 진행됩니다Angularjs 꺾은 선형 차트 SQL에서 데이터를 얻으십시오

$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 
     }, 

     ] 
    } 
    }

:이처럼 간다 내 컨트롤러에서 선 차트 코드가이

같은

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

그리고이 쿼리 데이터를 반환

나는 데이터베이스에서 얻은 값을 꺾은 선형 차트에 어떻게 할당 할 수 있는지에 대해 혼란 스럽다. 어떻게해야합니까?

출처

2017-10-10 bleykFaust

먼저 당신이 당신의 데이터가 database.Use에서 SUM을 반환 집계한다() function.The 올바른 형식이되어야합니다 : 컨트롤러에서

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

당신이 배열을해야한다.

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

간단한 차트를 만들려면 데이터와 레이블이 필요합니다.

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

출처

2017-10-10 08:14:48 Ardit

가 어떻게 그런 올바른 형식을 얻을 수있는 쿼리를 수행 할 수 있습니다 HTML 페이지에서

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

? – bleykFaust

SUM (COUNT (b.member_id)) AS 멤버 – Ardit

SELECT DISTINCT CAST (a.time AS 날짜), SUM (COUNT (b.member_id)) AS 멤버 from b 내부 조인 a b.mir_id = a.mir_id GROUP BY a.time order by a.time – Ardit

Angularjs 꺾은 선형 차트 SQL에서 데이터를 얻으십시오

답변

관련 문제