ng2Charts/chart.js 为一个图表更改图表类型会影响许多图表

Question

我有一个包含多个图表的仪表板。在每个图表上方，我都有一个 select 图表类型选项（条形图、饼图或折线图）。现在...在我的代码中，当您选择一种类型时，它会更改网站上的所有图表，但我只想更改用户 select 编辑类型的图表。

这是我的问题的 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

问题是因为所选值存储在类别级别...但是选择是在问题级别进行的...这就是为什么第一个和第三个图表数据读取相同的原因'type' 第二张和第四张图表读取相同 'type'

根据数据的层次结构：

类别 > 问题 > 独特图表
类别（之前选择的值存储在这里）>问题>唯一图表
类别 > 问题（现在选择的值存储在这里）> unique-chart

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

ng2Charts/chart.js 为一个图表更改图表类型会影响许多图表

ng2Charts/chart.js changing chart type for one is impacting many charts

typescript

chart.js

ng2-charts

angular