我尝试使用 Angular v13 和 14 以及 Angular fusion 包 3.18.0 和 4.0.3
当我使用类型作为时间序列且图表未呈现时,出现低于错误的错误 ::
应用程序模块
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;
});
}
}
需要知道如何解决上述错误。
您可以尝试使用以下代码 -
// 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
希望这对您有帮助。