Angular Highcharts hideNoData无法动态工作

Question

我无法使用hideNoData（）和showNoData（）来处理官方的highcharts-angular组件（https://github.com/highcharts/highcharts-angular）。

这是stackblitz的基本示例：https://stackblitz.com/edit/angular-highcharts-zvkcys?file=app%2Fapp.component.ts

这是一个简化版本。在我的真实项目中，我正在获取数据异步，并在加载时显示我的自定义（不是一个highcharts提供）加载指示器。所以最初我想关闭无数据消息但是一旦结果返回，取决于我可能需要显示无数据消息的结果。

我已经尝试在图表组件上使用[(update)]="updateFlag"来调用hideNoData()后触发更改，但没有效果。同样适用于update()，reflow()或redraw()。

我甚至手动调用detectChanges来强制消化循环，但也没有效果。

Answer 1

使用Highcharts，我发现我的组件知道图表引用非常重要，您可以使用Output提供的highcharts-chart回调来执行此操作。在您的组件中，您可以：

public callback = this.chartCallback.bind(this);

chartCallback在哪里：

public chartCallback(chart: Highcharts.Chart)
{
    this.chart = chart;
}

HTML将如下所示：

<highcharts-chart [Highcharts]="Highcharts" [options]="options
                  [callbackFunction]="callback">
</highcharts-chart>

这允许我们获取Highchart对象的实际引用，并使用它，如：

public hideNoData(): void
{
    this.chart.hideNoData();
}

但是，当然，一旦您获得了图表的引用，您就可以在组件中自由使用它。

请参阅here以获取完整的工作示例。

---

此外，如果你不想要no data message显示。那么这可能是你最好的路线：

this.options = {
    title : { text : 'simple chart' },
    series: [{
        data: [],
    }],
    noData: null
};

Answer 2

好的，我找到了解决方案。显然，Highcharts无法在同一个摘要周期中处理它。如果我打电话

setTimeout(() => {
    chart.hideNoData();
});

它工作正常隐藏。但是现在它在开始时会短暂闪烁，解决方法是完全禁用自动消息。在图表选项中添加以下内容：

chart: {
    events: {
        load(): void {
            this.hasData = (): boolean => {
                return true;
            };
        },
    },
},