Javascript 角度图表JS不显示多个图表的数据

我正试图在一页上获得多个图表。我看到了一个使用

ViewChildren

的示例：

const baseConfig: Chart.ChartConfiguration = {
  type: 'pie',
  options: {
    responsive: true,
  }
};

@ViewChildren('chart', { read: ElementRef }) chartElementRefs: QueryList<ElementRef>;
  chartData: Chart.ChartData[] = [
    {
      labels: ['1500', '1600', '1700', '1750', '1800', '1850', '1900', '1950', '1999', '2050'],
      datasets: [{
        data: [86, 378, 106, 306, 507, 111, 133, 221, 783, 5000],
        borderColor: 'red',
        fill: false
      }]
    },
    {
      labels: ['1500', '1600', '1700', '1750', '1800', '1850', '1900', '1950', '1999', '2050'],
      datasets: [{
        data: [86, 378, 106, 306, 507, 111, 133, 221, 783, 5000].reverse(),
        borderColor: 'blue',
        fill: false
      }]
    }
  ];

  ngAfterViewInit() {
    this.charts = this.chartElementRefs.map((chartElementRef, index) => {
      const config = Object.assign({}, baseConfig, { data: this.chartData[index] 
    });
    console.log(chartElementRef);
    return new Chart(chartElementRef.nativeElement, config);
  });
}

const baseConfig:Chart.ChartConfiguration={
键入“pie”，
选项：{
回答：是的，
}
};
@ViewChildren（'chart'，{read:ElementRef}）chartElementRefs:QueryList；
chartData:Chart.chartData[]=[
{
标签：['1500'，'1600'，'1700'，'1750'，'1800'，'1850'，'1900'，'1950'，'1999'，'2050']，
数据集：[{
数据：[8637810630650711132217835000]，
边框颜色：“红色”，
填充：假
}]
},
{
标签：['1500'，'1600'，'1700'，'1750'，'1800'，'1850'，'1900'，'1950'，'1999'，'2050']，
数据集：[{
数据：[863781063065071111132217835000]。相反（），
边框颜色：“蓝色”，
填充：假
}]
}
];
ngAfterViewInit（）{
this.charts=this.chartElementRefs.map（（chartElementRef，索引）=>{
const config=Object.assign（{}，baseConfig，{data:this.chartData[index]
});
控制台日志（chartElementRef）；
返回新图表（chartElementRef.nativeElement，配置）；
});
}

我试着用一种方法做到：

@ViewChildren('chart', { read: ElementRef }) chartElementRefs: QueryList<ElementRef>;
chartData: Chart.ChartData[] = []

createChartData(){
  var arrayChart: any = []
  console.log('number of charts', this.numberOfCharts);

  for (var i = 0; i < this.numberOfCharts; i++){
    var pie = {
      labels: ["Disks", "Mgmt", "Hardware", "FC", "Vols&Pols"],
      datasets: [{
        data: [20, 20, 20, 20, 20],
        backgroundColor: ["#008000", "#008000", "#008000", "#008000", "#008000"]
      }]
    }
    arrayChart.push(pie);
  }
  this.chartData= arrayChart;
  this.charts = this.chartElementRefs.map((chartElementRef, index) => {
    const config = Object.assign({}, baseConfig, { data: this.chartData[index] 
  });
  console.log(chartElementRef);
  return new Chart(chartElementRef.nativeElement, config);
  });
}

@ViewChildren（'chart'，{read:ElementRef}）chartElementRefs:QueryList；
chartData:Chart.chartData[]=[]
createChartData（）{
var arrayChart:any=[]
console.log（'number of charts'，this.numberOfCharts）；
对于（var i=0；i{
const config=Object.assign（{}，baseConfig，{data:this.chartData[index]
});
控制台日志（chartElementRef）；
返回新图表（chartElementRef.nativeElement，配置）；
});
}

HTML:

<div *ngFor="let chart of chartData">
    <canvas #chart></canvas>
</div>

并在

ngAfterViewInit（）

中调用了该方法，但这不起作用。。。它只显示空的地方。但是如果我像这个例子那样做，那么它将显示两个饼图。有人知道为什么吗

编辑

我想用一种从服务订阅的方法来做这件事

试试这个

HTML

<div *ngFor="let chart of chartData">
    <canvas #chart></canvas>
</div>

组件

import { Component, ViewChildren, ElementRef, QueryList } from '@angular/core';

import { Chart } from 'chart.js';

const baseConfig: Chart.ChartConfiguration = {
  type: 'pie',
  options: {
    responsive: true,
  }
};

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChildren('chart', { read: ElementRef }) chartElementRefs: QueryList<ElementRef>;

  chartData: Chart.ChartData[] = [
    {
      labels: ['1500', '1600', '1700', '1750', '1800', '1850', '1900', '1950', '1999', '2050'],
      datasets: [{
        data: [86, 378, 106, 306, 507, 111, 133, 221, 783, 5000],
        borderColor: 'red',
        fill: false
      }]
    },
    {
      labels: ['1500', '1600', '1700', '1750', '1800', '1850', '1900', '1950', '1999', '2050'],
      datasets: [{
        data: [86, 378, 106, 306, 507, 111, 133, 221, 783, 5000].reverse(),
        borderColor: 'blue',
        fill: false
      }]
    }
  ];

  charts: Chart[] = [];

  ngAfterViewInit() {
    this.charts = this.chartElementRefs.map((chartElementRef, index) => {
      const config = Object.assign({}, baseConfig, { data: this.chartData[index] });

      return new Chart(chartElementRef.nativeElement, config);
    });
  }
}

从'@angular/core'导入{Component，ViewChildren，ElementRef，QueryList}；
从'Chart.js'导入{Chart}；
const baseConfig:Chart.ChartConfiguration={
键入“pie”，
选项：{
回答：是的，
}
};
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
@ViewChildren（'chart'，{read:ElementRef}）chartElementRefs:QueryList；
chartData:Chart.chartData[]=[
{
标签：['1500'，'1600'，'1700'，'1750'，'1800'，'1850'，'1900'，'1950'，'1999'，'2050']，
数据集：[{
数据：[8637810630650711132217835000]，
边框颜色：“红色”，
填充：假
}]
},
{
标签：['1500'，'1600'，'1700'，'1750'，'1800'，'1850'，'1900'，'1950'，'1999'，'2050']，
数据集：[{
数据：[863781063065071111132217835000]。相反（），
边框颜色：“蓝色”，
填充：假
}]
}
];
图表：图表[]=[]；
ngAfterViewInit（）{
this.charts=this.chartElementRefs.map（（chartElementRef，索引）=>{
const config=Object.assign（{}，baseConfig，{data:this.chartData[index]}）；
返回新图表（chartElementRef.nativeElement，配置）；
});
}
}

这是同一个例子。。。我想用一种方法从服务中订阅数据