我正尝试通过遵循链接Angular标准示例
来首次使用angular6实现堆积柱形图。https://www.tutorialspoint.com/angular_highcharts/angular_highcharts_column_stacked.htm
但是,这给了我网页上的空白容器。 有什么需要补充的吗?
下面我附上我的html和ts文件以供参考。
app.module.ts
imports: [
...
HighchartsChartModule
],
.HTML file
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
<highcharts-chart
[HighCharts]="highcharts"
[options]="chartOptions"
></highcharts-chart>
</div>
.ts file
highcharts = Highcharts;
chartOptions = {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 250,
y: 100,
floating: true,
borderWidth: 1,
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip : {
valueSuffix: ' millions'
},
plotOptions: {
column: {
dataLabels: {
enabled: true
}
},
series: {
stacking: 'normal'
}
},
credits:{
enabled: false
},
series: [
{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
},
{
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
},
{
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}
]
};
constructor() {
}
ngOnInit() {
}
请分享您的建议/建议。
谢谢!
答案 0 :(得分:0)
网页空白的原因如下: 我在根目录app.module.ts下添加了HighChartsChartModule导入。 但是在我的项目中有不同的模块,每个模块都有自己的.module.ts文件。 因此,如果我在针对特定模块的导入下添加HighChartsChartModule,则它将按预期工作。 如果我只在app.module.ts
下添加,它将永远无法正常工作import { HighchartsChartModule } from 'highcharts-angular';
@NgModule({
imports: [
HighchartsChartModule
],