Question

我有这个JPA查询，我想从中从Spring生成Angular Barchart：

TVolumeCtrl

预期的查询结果：

    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;
    }

JPA查询中的映射对象：

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

角度服务：

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);
  }
}

带有Barchart的仪表板组件：

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>

} }

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
          };
  });
}

从列表生成条形图

1 个答案: