ChartJS Angular 图表js数据无显示数据

jckbn6z7  于 2023-01-20  发布在  Chart.js
关注(0)|答案(1)|浏览(243)

大家好,我使用的图表JS与Angular 我有在每个月的订单数量在这个例子中,我有在10月和11月的订单数量,我想把它放在数据图表
订购服务列表订购()订阅(

  1. commande =>{
  2. this.orders = commande;
  3. this.oc=this.orders.filter(item => item.dateCreated && new Date(item.dateCreated).getMonth() === 9).length
  4. this.nov=this.orders.filter(item => item.dateCreated && new Date(item.dateCreated).getMonth() === 10).length
  5. })

这是chart js的代码我想把nov和oc的值放到data[]中

  1. public lineChartData: ChartConfiguration<'line'>['data'] = {
  2. labels: [
  3. 'October',
  4. 'Novermber',
  5. 'December'
  6. ],
  7. datasets: [
  8. {
  9. data:[this.oc,this.nov,5],
  10. label: 'Series A',
  11. fill: true,
  12. tension: 0.5,
  13. borderColor: 'black',
  14. backgroundColor: 'rgba(255,0,0,0.3)'
  15. }
  16. ]
  17. };
  18. public lineChartOptions: ChartOptions<'line'> = {
  19. responsive: false
  20. };
  21. public lineChartLegend = true;
  22. public lineChartType!: "line";

这是我的html代码

  1. <h1> oc :{{oc}}</h1>
  2. <h1> nov :{{nov}}</h1>
  3. <div style="display: block;">
  4. <canvas baseChart width="800" height="400"
  5. [type]="'line'"
  6. [data]="lineChartData"
  7. [options]="lineChartOptions"
  8. [legend]="lineChartLegend">
  9. </canvas>
  10. </div>

这是结果,值oc和nov在本机显示中工作,但在chart中不工作,这是我第一次使用chart js,有人告诉我我必须做什么

ni65a41a

ni65a41a1#

我修复了这个问题,问题是在订阅数据可用之前呈现图表,所以我只在收到数据后才呈现图表,我像这样设置el布尔变量

  1. dataReceived = false;
  2. commande => {
  3. this.orders = [...commande];
  4. this.oc = this.orders.filter(item => item.dateCreated && new Date(item.dateCreated).getMonth() === 9).length
  5. this.nov = this.orders.filter(item => item.dateCreated && new Date(item.dateCreated).getMonth() === 10).length
  6. this.dataReceived = true;
  7. this.lineChartData.datasets[0].data = [this.oc, this.nov, 5]
  8. })

在html中,我添加了一个ngif指令,只在数据可用时才呈现图表

  1. <div *ngIf="dataReceived">
  2. <canvas baseChart width="800" height="400"
  3. [type]="'line'"
  4. [data]="lineChartData"
  5. [options]="lineChartOptions"
  6. [legend]="lineChartLegend">
  7. </canvas>
  8. </div>

和它的世界,如你所见,抱歉迟到了,我现在才注意到问题仍然悬而未决

展开查看全部

相关问题