NG2图表/ chart.js之改变图表类型之一被影响许多图表

Question

我有多个图表的仪表板。每个图表以上我有作为图表类型（条形图，饼图或线）一个选择选项。现在...在我的代码它改变了所有网站上的图表，当你选择了一个类型，但我只想要更改用户选择的类型的图表。

这里是我的问题的Stackblitz：https://stackblitz.com/edit/angular-yvy8mf

难道你们帮帮我吗？

  shapes = [
    { id: "bar", display: "bar chart" },
    { id: "pie", display: "pie chart" },
    { id: "line", display: "line chart" },
  ];

onChange(event) {

    this.selectedType = event.target.value;
   
  }  

  <div id="content" class="form__card" *ngFor="let a of model[0]?.category; let ix = index">
   
      <ng-container *ngFor="let b of a.question; let iy = index">
       
                  <select *ngIf="categoryQuestion.questionType != 'text'" class="form-control input-sm " (change)="onChange($event)">
                    <option disabled selected>Wähle einen Chart Typ </option>
                    <option *ngFor="let t of shapes" [value]=t.id>{{t.display}}</option>
                  </select>

           

                <div *ngIf="selectedType === 'bar'" style="min-height: 200px;">

                  <canvas baseChart [data]="loadData(ix,iy)" [labels]="loadLabels(ix, iy)"                [options]="barChartOptions"
                    [legend]="barChartLegend" [options]="chartOption" [chartType]="'bar'"></canvas>

                </div>

                <div *ngIf="selectedType === 'pie'" style="min-height: 200px;">

                  <canvas baseChart [data]="loadData(ix,iy)" [labels]="loadLabels(ix, iy)"          [options]="pieChartOptions"
                    [chartType]="'pie'" (chartHover)="chartHovered($event)"></canvas>

                </div>

                <div *ngIf="selectedType === 'line'" style="min-height: 200px;">

                  <canvas baseChart [data]="loadData(ix,iy)" [labels]="loadLabels(ix, iy)" [options]="lineChartOptions"
                    [chartType]="'line'" (chartHover)="chartHovered($event)" [legend]="lineChartLegend"></canvas>

                </div>   
    </ng-container>
  </div>

Answer 1

要查看working code here

这个问题是因为选择的值保存在类的水平......然而，选择了在这个问题的一级所作...这就是为什么第一和第三图表数据读取相同的“类型”和第二和第四图表都在读同一“型”

根据数据的层次结构：

• 类别>问题>独特-图表
• 类别（先前选择的值被存储在这里）>问题>独特-图表
• 类别>中心（现在选择的值存储在这里）>独特-图表

的onChange功能

onChange(event, ix, iy) {
    console.log("for:" + ix + " & " + iy + ", selected type" + event.target.value);
    this.selectedType[iy] = event.target.value;
    this.evaluationModel[0].category[ix].question[iy].selectedType = event.target.value;
  }