如何摆脱 angular 中的 highcharts 13 错误？

Question

嗨，我正在研究 Angular，我想要这个功能，比如在选项卡和显示图表之间单击时在部分之间切换。

我收到#13 error ，并且图表没有显示在第二个选项卡中，如何在选项卡之间切换时执行此操作。

这是迄今为止尝试过的代码： Stackblitz

任何解决方案都会有所帮助。

Answer 1

它不起作用，因为您正在为每个 If 删除/读取渲染容器。 将容器移到条件渲染差异 (*ngIf) 之外：

<div> <!-- rendering root -->
  <div>
    <button type="button" (click)="ShowDiv('A');ok()">Show A</button>
    <button type="button" (click)="ShowDiv('B');ok()">Show B</button>
    <button type="button" (click)="ShowDiv('C');ok()">Show C</button>
  </div>
  <div id="container">
    <div *ngIf="currDiv == 'A'"></div>
    <div *ngIf="currDiv == 'B'"></div>
    <div *ngIf="currDiv == 'C'"></div>
  </div>
</div>

https://stackblitz.com/edit/angular-showdivonclicktoggle-z2mqb2?file=src/app/app.component.html UPDATE: make sure you never remove the div container in your ok function.

#line 96:
Highcharts.chart('container1', {}) // don't do this
Highcharts.chart('container', { /** new chart */ })

另外你为什么需要确定，你可以使用 ShowDiv？ 还要在 object（第 173 行）之外创建单击 function（第 173 行）移除容器或用新容器替换它就像爬树并移除您坐的树枝。

Answer 2

您可以只创建一个container并在单击按钮后更新图表。 它看起来更简单，如果你愿意，你也可以添加这些条件。

API: https://api.highcharts.com/class-reference/Highcharts.Chart#update
演示：https://stackblitz.com/edit/angular-showdivonclicktoggle-m54shc