从列表生成条形图

Question

我有这个JPA查询,我想从Spring生成Angular Barchart:

    public List<PaymentTransactionsDailyFacts> findPaymentTransactionsDailyFacts(LocalDateTime start_date, LocalDateTime end_date) {

        String hql = "SELECT SUM(amount) AS sum_volume, COUNT(*) AS sum_Transactions " + 
                " WHERE (created_at BETWEEN :start_date AND :end_date )" + 
                " GROUP BY DATE(created_at)";

        TypedQuery<PaymentTransactionsDailyFacts> query = entityManager.createQuery(hql,
                PaymentTransactionsDailyFacts.class).setParameter("start_date", start_date).setParameter("end_date", end_date);
        List<PaymentTransactionsDailyFacts> data = query.getResultList();
        return data;
    }

预期的查询结果:

Date       | Amount| Number of transactions per day |
11-11-2018 | 30    | 3                              |
11-12-2018 | 230   | 13                             |

JPA查询中的映射对象:

public class DashboardDTO {

    private Date date;

    private int sum_volume;

    private int sum_Transactions;

    ... getters and setters
}

角度服务:

@Injectable({
  providedIn: 'root'
})
export class DashboardService {

  constructor(private http: HttpClient) {
  }

  getCurruncyList(): Observable<Array<CurruncyList>> {
    return this.http.get<Array<CurruncyList>>(environment.api.urls.dashboard.getVolumes);
  }
}

接口

export interface CurruncyList {
  date: Date,
  amount: number,
  number_of_transactions: number
}

带有条形图的仪表板组件:

  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  barData: any;

  constructor() {
  }

  ngOnInit() {
    this.barChart();
  }


  barChart() {
    this.barData = {
      labels: ['02-10-2018', '03-10-2018', '04-10-2018', '05-10-2018', '06-10-2018', '07-10-2018', '08-10-2018'],
      datasets: [
        {
          label: 'USD',
          backgroundColor: '#42A5F5',
          borderColor: '#1E88E5',
          data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
          label: 'EUR',
          backgroundColor: '#9CCC65',
          borderColor: '#7CB342',
          data: [28, 48, 40, 19, 86, 27, 90]
        }   
      ]
    }
  }
}

我如何从中生成Barchant <Array<CurruncyList>？我想使用上面的代码从上面列出的数据库查询中获取数据.

更新:测试示例:

import {Component, OnInit} from '@angular/core';
import {DashboardService} from "../service/dashboard.service";

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  barData: any;

  constructor(private dashboardService: DashboardService) {
  }

  ngOnInit() {
    this.barChart();
  }

  barChart(){
this.dashboardService.getCurruncyList().subscribe(data => {
   this.barData = data.map(t => t.date);
   response.map(function (o) {
      return {
        data: 22,
        label: o.date
      };
   });
});

}}

Answer 1

您需要在组件中订阅并使用 Array.map 生成 dataLabels，如下所示，

constructor(private chartService : DashboardService)

renderChart(){
  this.chartService.getCurruncyList().subscribe(data=>{
       this.chartLables = data.map(t=>t.date);
       response.map(function (o) {
          return {
            data: push the transactions count
            label: o.date
          };
  });
}