我正在尝试从 FusionCharts 实现
Msstackedcolumn2dlinedyTypeError：无法读取未定义的属性“addSymbol” 在 helper.js:1 在模块../node_modules/@fusioncharts/core/src/toolbox/tools/helper.js (helper.js:1) 在 webpack_require （引导程序：84） 在模块../node_modules/@fusioncharts/core/src/toolbox/tools/tool.js (tool.js:1) 在 webpack_require （引导程序：84） 在模块../node_modules/@fusioncharts/core/src/toolbox/tools/scrollbar/index.js (index.js:1) 在 webpack_require （引导程序：84） 在模块../node_modules/@fusioncharts/core/src/toolbox/tools/index.js (index.js:1) 在 webpack_require （引导程序：84） 在模块../node_modules/@fusioncharts/core/src/toolbox/index.js (index.js:1) 在resolvePromise (zone-evergreen.js:797) 在resolvePromise (zone-evergreen.js:754) 在zone-evergreen.js：858 在 ZoneDelegate.invokeTask (zone-evergreen.js:391) 在 Object.onInvokeTask (core.js:34182) 在 ZoneDelegate.invokeTask (zone-evergreen.js:390) 在 Zone.runTask (zone-evergreen.js:168) 在rainMicroTaskQueue（zone-evergreen.js：559）
在我的模块中，这就是我导入它的方式
import * as FusionCharts from "fusioncharts";
import * as charts from "fusioncharts/fusioncharts.charts";
import * as FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";
import { FusionChartsModule } from "angular-fusioncharts";
import * as TimeChart from "fusioncharts/fusioncharts.timeseries";
import * as Msstackedcolumn2dlinedy from "fusioncharts/msstackedcolumn2dsplinedy";
import * as Gammel from "fusioncharts/themes/fusioncharts.theme.gammel";
FusionChartsModule.fcRoot(FusionCharts, Msstackedcolumn2dlinedy, FusionTheme);
@NgModule({
declarations: [
ParcelsCombinationChartsComponent
],
imports: [
FusionChartsModule
]
})
在我的 component.ts 文件中
data: any;
width = 100;
height = 400;
type = "msstackedcolumn2dlinedy";
dataFormat = "json";
dataSource: any;
constructor() {}
ngOnInit() {
this.data = {
chart: {
caption:
"Market Share of Korean Automobile Manufacturers in US",
subcaption: "2011 - 2016",
pyaxisname: "Units Sold",
syaxisname: "% of total market share",
snumbersuffix: "%",
syaxismaxvalue: "25",
theme: "fusion",
showvalues: "0",
drawcrossline: "1",
divlinealpha: "20"
},
categories: [
{
category: [
{
label: "2011"
},
{
label: "2012"
},
{
label: "2013"
},
{
label: "2014"
},
{
label: "2015"
},
{
label: "2016"
}
]
}
],
dataset: [
{
dataset: [
{
seriesname: "Honda City",
data: [
{
value: "997281"
},
{
value: "1063599"
},
{
value: "1063964"
},
{
value: "1152123"
},
{
value: "1289128"
},
{
value: "1394972"
}
]
},
{
seriesname: "Honda Civic",
data: [
{
value: "196354"
},
{
value: "259493"
},
{
value: "234755"
},
{
value: "205717"
},
{
value: "205081"
},
{
value: "224978"
}
]
}
]
},
{
dataset: [
{
seriesname: "Hyundai Verna",
data: [
{
value: "373709"
},
{
value: "391276"
},
{
value: "380002"
},
{
value: "411456"
},
{
value: "476001"
},
{
value: "500537"
}
]
},
{
seriesname: "Hyundai Sonata",
data: [
{
value: "47548"
},
{
value: "73130"
},
{
value: "107659"
},
{
value: "179783"
},
{
value: "202390"
},
{
value: "156107"
}
]
}
]
}
],
lineset: [
{
seriesname: "Market Share %",
plottooltext:
"Total market share of Korean cars in $label is <b>$dataValue</b> in US",
showvalues: "0",
data: [
{
value: "17.74"
},
{
value: "19.23"
},
{
value: "15.43"
},
{
value: "12.34"
},
{
value: "15.34"
},
{
value: "21.17"
}
]
}
]
};
this.dataSource = this.data;
}
在 html 文件中
<fusioncharts *ngIf="dataSource !== undefined" [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource">
</fusioncharts>
您可以尝试使用以下代码 -
// app.module.ts 中需要设置
import { NgModule, enableProdMode } from '@angular/core'
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { FusionChartsModule } from 'angular-fusioncharts';
// Load FusionCharts
import * as FusionCharts from 'fusioncharts';
// Load Charts module
import * as Charts from 'fusioncharts/fusioncharts.charts';
// Load fusion theme
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'
// Add dependencies to FusionChartsModule
FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FusionChartsModule
],
providers: [
],
bootstrap: [ AppComponent ]
})
export class AppModule {
}
// 在 app.component.ts 中
import { Component } from '@angular/core';
@Component({
selector: 'app',
templateUrl: 'app.component.html'
})
export class AppComponent {
dataSource: {
"chart": {
"caption": "Quarterly Sales vs. Profit % in Last Year",
"subcaption": "Product-wise Break-up - Harry's SuperMart",
"xAxisName": "Quarter",
"pYAxisName": "Sales",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"numbersuffix": "M",
"sNumberSuffix": "%",
"sYAxisMaxValue": "25",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineDashed": "1",
"divLineDashLen": "1",
"theme": "fusion"
},
"categories": [{
"category": [{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}],
"dataset": [{
"dataset": [{
"seriesname": "Processed Food",
"data": [{
"value": "30"
},
{
"value": "26"
},
{
"value": "33"
},
{
"value": "31"
}
]
},
{
"seriesname": "Un-Processed Food",
"data": [{
"value": "21"
},
{
"value": "28"
},
{
"value": "39"
},
{
"value": "41"
}
]
}
]
},
{
"dataset": [{
"seriesname": "Electronics",
"data": [{
"value": "27"
},
{
"value": "25"
},
{
"value": "28"
},
{
"value": "26"
}
]
},
{
"seriesname": "Apparels",
"data": [{
"value": "17"
},
{
"value": "15"
},
{
"value": "18"
},
{
"value": "16"
}
]
}
]
}
],
"lineset": [{
"seriesname": "Profit %",
"showValues": "0",
"data": [{
"value": "14"
},
{
"value": "16"
},
{
"value": "15"
},
{
"value": "17"
}
]
}]
};
constructor () {
}
}
//在app.component.html中
<fusioncharts
width="600"
height="400"
type="msstackedcolumn2dlinedy"
[dataSource]=dataSource>
</fusioncharts>
文档 - https://fusioncharts.github.io/angular-fusioncharts/#/ex3