角度融合时间序列图表给出错误无法读取未定义的“addSymbol”扩展的属性必须具有有效的扩展属性

Question

我尝试使用 Angular v13 和 14 以及 Angular fusion 包 3.18.0 和 4.0.3

当我使用类型作为时间序列且图表未呈现时，出现低于错误的错误 ::

• 未处理的 Promise 拒绝：类型错误：无法读取未定义的属性（读取“addSymbol”）
• 扩展错误 >> fusioncharts 扩展必须具有有效的扩展属性。

应用程序模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import angular-fusioncharts
import { FusionChartsModule } from 'angular-fusioncharts';
// Import FusionCharts library and chart modules
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as TimeSeries from 'fusioncharts/fusioncharts.timeseries'; // Import timeseries
// Pass the fusioncharts library and chart modules
FusionChartsModule.fcRoot(FusionCharts, Charts, TimeSeries);
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // Specify FusionChartsModule as import
    FusionChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}``

app.component.html

<div>
  <fusioncharts
    [type]="type"
    [width]="width"
    [height]="height"
    [dataSource]="dataSource"
  ></fusioncharts>
</div>

app.component.ts

import { Component } from '@angular/core';
import * as FusionCharts from 'fusioncharts';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  dataSource: any;
  type: string;
  width: string;
  height: string;
  constructor() {
    this.type = 'timeseries';
    this.width = '400';
    this.height = '400';
    this.dataSource = {
      data: null,
      yAxis: {
        plot: [{ value: 'Sales' }]
      },
      caption: {
        text: 'Online Sales of a SuperStore in the US'
      }
    };
    this.fetchData();
  }
  fetchData() {
    let jsonify =(res:any) => res.json();
 

    var dataFetch = fetch(
      "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/stacked-colum-chart-with-time-axis-data.json"
    ).then(jsonify);
    var schemaFetch = fetch(
      "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/stacked-colum-chart-with-time-axis-schema.json"
    ).then(jsonify);

    Promise.all([dataFetch, schemaFetch]).then(res => {
      const [data, schema] = res;
      // First we are creating a DataStore
      const fusionDataStore = new FusionCharts.DataStore();
      // After that we are creating a DataTable by passing our data and schema as arguments
      const fusionTable = fusionDataStore.createDataTable(data, schema);
      // Afet that we simply mutated our timeseries datasource by attaching the above
      // DataTable into its data property.
      this.dataSource.data = fusionTable;
    });


  }

}

需要知道如何解决上述错误。

Answer 1

您可以尝试使用以下代码 -

// app.module.ts 中需要设置

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

import * as FusionCharts from "fusioncharts";
import * as TimeSeries from "fusioncharts/fusioncharts.timeseries";
import * as FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import { FusionChartsModule } from "angular-fusioncharts";

FusionChartsModule.fcRoot(FusionCharts, TimeSeries, FusionTheme);
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FusionChartsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

// 在 app.component.ts 中

import { Component } from "@angular/core";
import * as FusionCharts from "fusioncharts";
const dataUrl =
  "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/specify-initial-time-interval_data.json";
const schemaUrl =
  "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/specify-initial-time-interval_schema.json";
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  dataSource: any;
  type: string;
  width: string;
  height: string;
  constructor() {
    this.type = "timeseries";
    this.width = "400";
    this.height = "400";
    this.dataSource = {
      caption: {
        text: "Sales Analysis - Grocery"
      },
      chart: {
        theme: "fusion"
      },
      subcaption: {
        text: "Initial time interval spread is from 01-Jan-12 to 31-Dec-12"
      },
      data: null,
      yaxis: [
        {
          plot: {
            value: "Grocery Sales Value"
          },
          format: {
            prefix: "$"
          },
          title: "Sale Value"
        }
      ],
      xaxis: {
        initialinterval: {
          from: "01-Jan-12",
          to: "31-Dec-12"
        }
      }
    };
    this.fetchData();
  }
  fetchData() {
    let jsonify = res => res.json();
    let dataFetch = fetch(dataUrl).then(jsonify);
    let schemaFetch = fetch(schemaUrl).then(jsonify);
    Promise.all([dataFetch, schemaFetch]).then(res => {
      let data = res[0];
      let schema = res[1];
      let fusionTable = new FusionCharts.DataStore().createDataTable(
        data,
        schema
      ); // Instance of DataTable to be passed as data in dataSource
      this.dataSource.data = fusionTable;
    });
  }
}

//在app.component.html中

<div>
  <fusioncharts
    [type]="type"
    [width]="width"
    [height]="height"
    [dataSource]="dataSource"
  ></fusioncharts>
</div>

这是演示小提琴 - https://codesandbox.io/s/ww2y9w1m0l?file=/src/main.ts

要了解更多信息，请参阅文档 - https://fusioncharts.github.io/angular-fusioncharts/#/ex26

希望这对您有帮助。