java – 从列表生成条形图

我有这个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
          };
  });
}

相关文章

本文从从Bitcask存储模型讲起,谈轻量级KV系统设计与实现。从...
内部的放到gitlab pages的博客,需要统计PV,不蒜子不能准确...
PCM 自然界中的声音非常复杂,波形极其复杂,通常我们采用的...
本文介绍如何离线生成sst并在线加载,提供一种用rocksdb建立...
验证用户输入是否正确是我们应用程序中的常见功能。Spring提...
引入pdf2dom &lt;dependency&gt; &lt;groupId&a...