Question

我正在接收一个json对象，其中包含要在模板中显示的图表列表。每个图表都有[数据]，[选项]和[类型]。即使我使用ngFor进行循环，我似乎也无法使id正常工作。

bar.component.ts

@Component({
  selector: 'ngx-chartjs-bar',
  template: `
    <div *ngFor="let chart of bardata>
    <chart type="bar" [data]="data" [options]="options"></chart>
    </div>
  `,
})
export class ChartjsBarComponent implements OnDestroy {
  data: any;
  bardata: any;
  options: any;
  themeSubscription: any;
  newLabel : any[];
  newData : number[];
  temp : any;


  constructor(
    private theme: NbThemeService,
    protected apiService: ApiService,

  ) {

    this.bardata = this.apiService.response_object.body;
    this.newData = [];
    this.newLabel = [];
    this.temp = [];

    for(var obj in this.bardata.byFile) {
       for(var curr in this.bardata.byFile[obj]) {
          this.temp.push(this.bardata.byFile[obj][curr]);
       }
    }

    console.log(this.bardata);
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {

      const colors: any = config.variables;
      const chartjs: any = config.variables.chartjs;
      this.data = {
        labels: ['Purchase Count', 'Refund Count', 'Payment Count'],
        datasets:  this.temp,

        /* [{
          data: this.newData,
          label: this.newLabel[0],
          backgroundColor: NbColorHelper.hexToRgbA(colors.primaryLight, 0.8),
        }, {
          data: [28, 48, 40, 19, 86, 27, 90],
          label: this.newLabel[1],
          backgroundColor: NbColorHelper.hexToRgbA(colors.infoLight, 0.8),
        }], */
      };

      this.options = {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
          labels: {
            fontColor: chartjs.textColor,
          },
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                display: false,
                color: chartjs.axisLineColor,
              },
              ticks: {
                fontColor: chartjs.textColor,
              },
            },
          ],
          yAxes: [
            {
              gridLines: {
                display: true,
                color: chartjs.axisLineColor,
              },
              ticks: {
                fontColor: chartjs.textColor,
              },
            },
          ],
        },
      };
    });
  }

  ngOnInit() {
  }

  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }
}

在这种情况下，temp包含条形图或图表的列表，而newData是api中的数据，其中包含条形图的数据集。

组件的

html：

<nb-card>
<nb-card-header>View All Statistics</nb-card-header>
<nb-card-body>
    <div class="row">
        <div class="col-lg-6">
            <nb-card>
                <nb-card-header>Bar</nb-card-header>
                <nb-card-body>
             issue here -->   <div *ngFor="let data of barData; index as i" [attr.data- 
                index]="i"> 
                <ngx-chartjs-bar></ngx-chartjs-bar>
                </div>     
                </nb-card-body>
            </nb-card>
        </div>
    </div>
</nb-card-body>

以上不是一个可行的示例，只是对应该发生的事情的一个想法，但不能完全确定如何设置索引并遍历每个数据集。 ngFor应该进入html还是组件中的装饰器？

编辑：json只是一个图表数组，每个索引都引用一个具有相应数据集的图表。因此，如果barData [0]本身就是一个图表。

Charts.js + angular2 / javascript中图表的动态数量

0 个答案: