java – 从列表生成条形图

前端之家收集整理的这篇文章主要介绍了java – 从列表生成条形图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

  1. public List

预期的查询结果:

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

JPA查询中的映射对象:

  1. public class DashboardDTO {
  2. private Date date;
  3. private int sum_volume;
  4. private int sum_Transactions;
  5. ... getters and setters
  6. }

角度服务:

  1. @Injectable({
  2. providedIn: 'root'
  3. })
  4. export class DashboardService {
  5. constructor(private http: HttpClient) {
  6. }
  7. getCurruncyList(): Observable

接口

  1. export interface CurruncyList {
  2. date: Date,amount: number,number_of_transactions: number
  3. }

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

  1. selector: 'app-dashboard',templateUrl: './dashboard.component.html',styleUrls: ['./dashboard.component.scss']
  2. })
  3. export class DashboardComponent implements OnInit {
  4. barData: any;
  5. constructor() {
  6. }
  7. ngOnInit() {
  8. this.barChart();
  9. }
  10. barChart() {
  11. this.barData = {
  12. labels: ['02-10-2018','03-10-2018','04-10-2018','05-10-2018','06-10-2018','07-10-2018','08-10-2018'],datasets: [
  13. {
  14. label: 'USD',backgroundColor: '#42A5F5',borderColor: '#1E88E5',data: [65,59,80,81,56,55,40]
  15. },{
  16. label: 'EUR',backgroundColor: '#9CCC65',borderColor: '#7CB342',data: [28,48,40,19,86,27,90]
  17. }
  18. ]
  19. }
  20. }
  21. }

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

更新:测试示例:

  1. import {Component,OnInit} from '@angular/core';
  2. import {DashboardService} from "../service/dashboard.service";
  3. @Component({
  4. selector: 'app-dashboard',styleUrls: ['./dashboard.component.scss']
  5. })
  6. export class DashboardComponent implements OnInit {
  7. barData: any;
  8. constructor(private dashboardService: DashboardService) {
  9. }
  10. ngOnInit() {
  11. this.barChart();
  12. }
  13. barChart(){
  14. this.dashboardService.getCurruncyList().subscribe(data => {
  15. this.barData = data.map(t => t.date);
  16. response.map(function (o) {
  17. return {
  18. data: 22,label: o.date
  19. };
  20. });
  21. });

}
    }

最佳答案
您需要在组件中订阅并使用Array.map生成dataLabels,如下所示,

  1. constructor(private chartService : DashboardService)
  2. renderChart(){
  3. this.chartService.getCurruncyList().subscribe(data=>{
  4. this.chartLables = data.map(t=>t.date);
  5. response.map(function (o) {
  6. return {
  7. data: push the transactions count
  8. label: o.date
  9. };
  10. });
  11. }

猜你在找的Java相关文章