要在更改plotOptions后快速重新绘制Angular-Highcharts图表,您可以使用以下解决方法:
npm install angular-highcharts --save
import { Component } from '@angular/core';
import { Chart } from 'angular-highcharts';
@Component({
selector: 'app-chart',
template: `
`
})
export class ChartComponent {
chart: Chart;
constructor() {
this.chart = new Chart({
chart: {
type: 'bar'
},
title: {
text: 'My Chart'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
this.chart.options.plotOptions = {
series: {
point: {
events: {
click: function() {
alert('Point clicked!');
}
}
}
}
};
}
}
[chart]
指令来渲染图表:
ngOnChanges
钩子函数来监听plotOptions属性的变化,并在变化时更新图表实例:import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
export class ChartComponent implements OnChanges {
@Input() plotOptions: any;
ngOnChanges(changes: SimpleChanges) {
if (changes.plotOptions) {
this.chart.options.plotOptions = this.plotOptions;
this.chart.ref.redraw();
}
}
}
这样,当您在父组件中更改plotOptions时,图表将自动重新绘制以反映更改。
希望以上解决方法对您有所帮助!请注意,这只是一个示例,您可能需要根据您的实际需求进行适当的调整。