如何使用highcharts角度回调函数来获取图表对象

Question

我使用过https://github.com/highcharts/highcharts-angular这个官方包装并尝试调用回调函数来获取图表对象。不幸的是，尽管我尝试了各种方法，但都没有像我预期的那样得到任何正确的结果。此外，描述回调函数的文档并不多。有人能告诉我如何使用回调函数吗？

Answer 1

回调对我也不起作用。我正在检查代码源，我看到了名为chartInstance的@Output事件发射器。。。还记录了：

组件输出chartInstance-在创建图表后发出(请参阅演示应用程序和logChartInstance函数(

所以我使用了一个正常的输出事件绑定：

<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
...
(chartInstance)="onChartInstance($event)"
...
></highcharts-chart>

瞧。。。我认为这不是一个最终的解决方案，但作为一个临时的变通办法，它对我来说效果很好

Answer 2

它可以通过两个步骤实现：

1. 在组件的HTML文件中添加[callbackFunction]="chartCallback"(如文档中所示(：

<highcharts-chart
style="width: 100%; display: block"
[Highcharts]="Highcharts"
[options]="chartOptions"
[(update)]="updateDemo"
[callbackFunction]="chartCallback"
[runOutsideAngular]="true"
>
</highcharts-chart>

2. 初始化组件TS中的回调：

chartCallback: Function = function(chart) {
console.log("Chart instance: ", chart);
};

现场演示：https://codesandbox.io/s/angular-b5420

回调的文档(图表构造函数的第三个参数(。