java条形图_java – 从列表生成条形图

我有这个JPA查询,我想从

Spring生成Angular Barchart：

public List 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 query = entityManager.createQuery(hql,

PaymentTransactionsDailyFacts.class).setParameter("start_date", start_date).setParameter("end_date", end_date);

List 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> {

return this.http.get>(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]

}

]

}

}

}

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

更新：测试示例：

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

};

});

});

}

}