Привязка сводной сетки с диаграммой сетки данных с использованием угловых 7 и devextreme

Question

`Я ищу помощи, может кто-нибудь из вас поможет мне решить эту проблему.Сначала я случайно ввел файл JSON и создал соответствующую ему сводную сетку. Теперь я ищу кнопку для выбора осей и создания своего графика из сетки сводных данных с использованием библиотеки devextreme.Но я сталкиваюсь с этой проблемой:

App.modules.ts

import { JsonLoaderService } from "./json-loader.service"; import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { NavBarComponent } from "./nav-bar/nav-bar.component"; import { LayoutModule } from "@angular/cdk/layout"; import { FlexLayoutModule } from "@angular/flex-layout"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import {   MatToolbarModule,   MatButtonModule,   MatSidenavModule,   MatIconModule,   MatListModule, MatDividerModule,   MatInputModule } from "@angular/material"; import { ChartComponent } from "./chart/chart.component"; import { DxPivotGridModule, DxChartModule } from "devextreme-angular"; import { FormsModule } from "@angular/forms"; import { HttpClientModule } from "@angular/common/http"; @NgModule({   declarations: [AppComponent, NavBarComponent, ChartComponent],   imports: [
    BrowserModule,
    BrowserAnimationsModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    DxPivotGridModule,
    DxChartModule,
    FlexLayoutModule,
    MatDividerModule,
    MatInputModule,
    FormsModule,
    HttpClientModule   ],   providers: [JsonLoaderService],   bootstrap: [AppComponent] }) export class AppModule {} platformBrowserDynamic().bootstrapModule(AppModule);

Chart.components.ts

    import { Component, OnInit, ViewChild, AfterViewInit } from "@angular/core";
import { DxPivotGridComponent, DxChartComponent } from "devextreme-angular";
import { JsonLoaderService } from "../json-loader.service";

import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
@Component({
  selector: "app-chart",
  templateUrl: "./chart.component.html",
  styleUrls: ["./chart.component.css"]
})
export class ChartComponent implements AfterViewInit {
  url: string;
  pivotGridDataSource: any;
  showTotalsPrior = false;
  rowsDataFieldArea = false;
  treeHeaderLayout = true;
  loaded: boolean = false;
  customizeTooltip;
  @ViewChild(DxPivotGridComponent) pivotGrid: DxPivotGridComponent;
  @ViewChild(DxChartComponent) chart: DxChartComponent;
  constructor(private service: JsonLoaderService) {}
  display(data) {
    this.pivotGridDataSource = {
      store: data
    };
  }
  import(file: File) {
    if (file.type === "application/json") {
      let reader = new FileReader();
      reader.readAsText(file, "UTF-8");
      reader.onload = evt => {
        const e: any = evt;
        const data = JSON.parse(e.target.result);
        this.display(data);
        this.loaded = true;
      };
    } else {
      console.error("Fichier invalide");
    }
  }
  async fromUrl() {
    const data = await this.service.fromUrl(this.url);
    if (data) {
      this.display(data);
      this.loaded = true;
    }
  }
  ngAfterViewInit() {
    this.pivotGrid.instance.bindChart(this.chart.instance, {
      dataFieldsDisplayMode: "splitPanes",
      alternateDataFields: false
    });
  }
}

chart.component.html

    <div style="padding-left: 20px" fxLayout="row" fxLayoutGap="20px">
  <div fxLayout="column" fxLayoutGap="20px" style="width: 100%">
    <h2>Importation depuis un URL</h2>
    <div fxLayout="row">
      <mat-form-field>
        <input matInput placeholder="Url" [(ngModel)]="url" />
      </mat-form-field>
      <button mat-button color="primary" (click)="fromUrl()">Get</button>
    </div>
  </div>

  <mat-divider [vertical]="true"> </mat-divider>
  <div fxLayout="column" fxLayoutAlign="center center" style="width: 100%">
    <h2>
      Importation d'un fichier JSON
    </h2>
    <button mat-button (click)="b.click()">
      Cliquez ici pour choisir un fichier
    </button>
    <input type="file" hidden #b (change)="import($event.target.files[0])" />
  </div>
</div>
<mat-divider></mat-divider>
<div style="padding-left: 20px;padding-right: 20px">
  <mat-form-field>
    <input
      matInput
      (keyup)="applyFilter($event.target.value)"
      placeholder="Filtre"
    />
  </mat-form-field>
  <div *ngIf="!loaded" style="text-align: center">
    <h1>Aucune donnée trouvée</h1>

    <h2>
      Veuillez saisir une url ou <b (click)="b.click()">importez un fichier</b>
    </h2>
  </div>
</div>

<div id="pivotgrid-demo">
  <dx-chart id="sales-chart">
    <dxo-common-series-settings type="bar"></dxo-common-series-settings>
    <dxo-size [height]="320"></dxo-size>
    <dxo-adaptive-layout [width]="450"></dxo-adaptive-layout>
    <dxo-tooltip
      [enabled]="true"
      [customizeTooltip]="customizeTooltip"
    ></dxo-tooltip>
  </dx-chart>

  <dx-pivot-grid
    id="pivotgrid"
    [allowSortingBySummary]="true"
    [allowFiltering]="true"
    [showBorders]="true"
    [allowSortingBySummary]="true"
    [showColumnGrandTotals]="false"
    [showRowGrandTotals]="false"
    [showRowTotals]="false"
    [showColumnTotals]="false"
    [height]="510"
    [dataSource]="pivotGridDataSource"
  >
    <dxo-field-chooser [enabled]="true"></dxo-field-chooser>
    <dxo-scrolling mode="virtual"></dxo-scrolling>
  </dx-pivot-grid>
</div> 


  [1]: https://i.stack.imgur.com/53PXd.png