angular chart js数据无显示数据答案

【问题标题】：angular chart js data no display dataangular chart js数据无显示数据
【发布时间】：2023-01-19 02:11:42
【问题描述】：

嗨，大家好，我使用带有角度的图表 js 在这个例子中我有每个月的订单数量我有 10 月和 11 月的订单数量我想把它放在数据图表中

this.orderservice.listeOrder().subscribe (

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

这是图表 js 的代码，我想将 nov 和 oc 的值放入 data[]

 public lineChartData: ChartConfiguration<'line'>['data'] = {
    
    labels: [
      
      
      'October',
      'Novermber',
      'December'
     
    ],
    
    datasets: [
      {
        data:[this.oc,this.nov,5],
        
        label: 'Series A',
        fill: true,
        tension: 0.5,
        borderColor: 'black',
        backgroundColor: 'rgba(255,0,0,0.3)'
      }
    ]
  };
  public lineChartOptions: ChartOptions<'line'> = {
    responsive: false
  };
  public lineChartLegend = true;
  public lineChartType!: "line";

这就是我的 html 代码

          <h1> oc :{{oc}}</h1> 
           <h1> nov :{{nov}}</h1> 
           <div style="display: block;">
            <canvas baseChart width="800" height="400"
              [type]="'line'"
              [data]="lineChartData"
              [options]="lineChartOptions"
              [legend]="lineChartLegend">
            </canvas>
          </div>

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

【问题讨论】：

你能提供一些关于 stackblitz 的代码吗？
data:[this.oc,this.nov,5],的结果是什么？
oc 3 和 nov 1 正如你在 balise h1 中看到的，但它没有显示在图表中

标签： angular charts chart.js angular-chart

【解决方案1】：

我解决了这个问题，问题是图表在订阅数据可用之前被渲染，所以我只在收到数据后才渲染图表我设置 el 布尔变量就像那样

 dataReceived = false;

commande => {
        this.orders = [...commande];
        this.oc = this.orders.filter(item => item.dateCreated && new Date(item.dateCreated).getMonth() === 9).length
        this.nov = this.orders.filter(item => item.dateCreated && new Date(item.dateCreated).getMonth() === 10).length
        this.dataReceived = true;
        this.lineChartData.datasets[0].data = [this.oc, this.nov, 5]

      })

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

<div *ngIf="dataReceived">
    <canvas baseChart width="800" height="400"
        [type]="'line'"
        [data]="lineChartData"
        [options]="lineChartOptions"
        [legend]="lineChartLegend">
    </canvas>
</div>

以及你所看到的世界抱歉来晚了，我现在才注意到问题仍然悬而未决

【讨论】：