为什么我的离子没有响应瀑布图高图

Question

ionic info

为什么我的离子没有响应瀑布图高图表这是TS的一部分 我跟随瀑布高图 但我没有找到亮点 我只是得到

错误错误：

高图表错误 #17： www.highcharts.com/errors/17/?missingModuleFor=waterfall 缺少模块：瀑布

import { Component, OnInit, ViewChild } from '@angular/core';
import * as HighCharts from 'highcharts';
@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage {

constructor() { }

ionViewDidEnter() {
const myChart = HighCharts.chart('reven', {
chart: {
type: 'line'
},
title: {
text: ''
},
xAxis: {
categories: ['1', '2', '3', '4', '5', '6', '7']
},
yAxis: {
title: {
text: 'Total Production Tonnage'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal',
marker: {
enabled: true,
symbol: 'circle',
radius: 1
}
}
},
series: [
{
name: 'Revenue',
type: undefined,
color: '#ff8138',
data: [65, 59, 80, 81, 56, 55, 40]
}, {
name: 'Expense',
type: undefined,
color: '#ffd534',
data: [35, 40, 70, 61, 26, 35, 60]
}, {
name: 'Net Income',
type: undefined,
color: '#BBF0F3',
data: [30, 30, 50, 60, 20, 30, 50]
}
]
});
}

}

<div id="waterfallore"></div>

const myChart = HighCharts.chart('waterfallore', {
chart: {
type: 'waterfall'
},
title: {
text: 'Highcharts Waterfall'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'USD'
}
},
legend: {
enabled: true
},
tooltip: {
pointFormat: '<b>${point.y:,.2f}</b> USD'
},
series: [{
type: undefined,
upColor: '#ff8138',
color: '#ffd534',
data: [{
name: 'Start',
y: 120000
}, {
name: 'Product Revenue',
y: 569000
}, {
name: 'Service Revenue',
y: 231000
}, {
name: 'Positive Balance',
isIntermediateSum: true,
color: '#ffd534'
}, {
name: 'Fixed Costs',
y: -342000
}, {
name: 'Variable Costs',
y: -233000
}, {
name: 'Balance',
isSum: true,
color: '#ffd534'
}],
dataLabels: {
enabled: true,
style: {
fontWeight: 'bold'
}
},
pointPadding: 0
}]
});

控制台中的结果

Answer 1

您需要导入并初始化highcharts-more模块：

import * as Highcharts from 'highcharts';
import HC_more from 'highcharts/highcharts-more';
HC_more(Highcharts);