我有这个JPA查询,我想从Spring生成Angular Barchart：
public List
预期的查询结果：
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
接口
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',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
};
});
});
}
????}
您需要在组件中订阅并使用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
};
});
}
