我正在尝试使用不同的选项卡更改数据更新相同的图表 . 所以我的父组件具有此表单中的子组件 app-chart-metric-view . 我已经为mat选项卡组添加了选项卡事件检测 .
AdminConsolecomponent.html
<mat-tab-group mat-stretch-tabs class="mat-elevation-z4" (selectedTabChange)="tabChanged($event)">
<mat-tab label="Enable Plugin">
<div class="button-row">
<button mat-raised-button class="activation-buttons" (click)="openAddPluginDialog()">Add
plugin
</button>
</div>
</mat-tab>
<mat-tab label="Chart1">
<app-chart-metric-view></app-chart-metric-view>
</mat-tab>
<mat-tab label="Chart2">
<app-chart-metric-view></app-chart-metric-view>
</mat-tab>
</mat-tab-group>
我检测到选项卡选项卡更改,一旦触发,我调用子组件中的函数(在@viewChild的帮助下),它向后端发出请求,获取数据并显示它 .
此外,我将选项卡的标签发送到后端,并根据它我收到的数据发生了变化 . 问题是正在加载第一个选项卡的图表,但不适用于后续选项卡 .
AdminConsolecomponent.ts
import { ChartMetricViewComponent } from '../chart-metric-view/chart-metric-view.component';
export class AdminConsoleComponent {
@ViewChild( ChartMetricViewComponent ) child: ChartMetricViewComponent ;
constructor(//some components) { }
ngOnInit() {
//some functions
}
tabChanged = (tabChangeEvent: MatTabChangeEvent): void => {
if(tabChangeEvent.index !=0) {
this.child.shfk(tabChangeEvent.tab.textLabel);
}
}
chart-metric-view-component.ts
export class ChartMetricViewComponent implements OnInit {
metricItems: MetricItem[] = [];
constructor(public utility: ControltowerUtilityService, public metricService: MetricDataService, private chartService: ChartDataService) { }
@ViewChild('chartTarget') chartTarget: ElementRef;
@ViewChild('chartTarget2') chartTarget2: ElementRef;
chart: Highcharts.ChartObject;
chart2: Highcharts.ChartObject
public shfk(textLabel) {
this.chartService.getPluginMetrics(textLabel).subscribe(data => {
this.metricItems = data;
const options: Highcharts.Options = {
chart: {
type: 'column'
},
title: {
text: 'Stacked Consumption chart'
},
xAxis: {
categories: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
min: 0,
title: {
text: 'Bitbucket Consumption in TBs'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b>
',
pointFormat: '{series.name}: {point.y}
Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
}
}
},
series: [{
name: this.metricItems[0].name,
data: JSON.parse(" [ "+ this.metricItems[0].value+"]")//this.A //JSON.parse("["+this.metricItems[0].value+"]")//[5, 3, 4, 7, 2, 6] {this.A}
}, {
name: this.metricItems[1].name,
data: JSON.parse("["+this.metricItems[1].value+"]")
}, {
name: this.metricItems[2].name,
data: JSON.parse("["+this.metricItems[2].value+"]")
}, {
name: this.metricItems[3].name,
data: JSON.parse("["+this.metricItems[3].value+"]")
}, {
name: this.metricItems[4].name,
data: JSON.parse("["+this.metricItems[4].value+"]")
}]
};
this.chart = chart(this.chartTarget.nativeElement, options);
});
}
On change of tab I have verified that request is being made and I am receiving the correct response but cant update my chart. Can someone please help ? Thanks
找到了类似的问题,但仍然无法弄清楚
highcharts not loading in tabs
HIghcharts & Bootstrap: Chart on Tab 2 is not appearing. Though First chart is working fine