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

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

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

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

这是chart 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在本机显示中工作,但在chart中不工作,这是我第一次使用chart js,有人告诉我我必须做什么

ni65a41a

ni65a41a1#

我修复了这个问题,问题是在订阅数据可用之前呈现图表,所以我只在收到数据后才呈现图表,我像这样设置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>

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

相关问题