`我正在寻求帮助,你们中的任何人都可以帮助我解决这个问题。首先,我随机输入了一个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