添加的系列不会保留在图表容器 show/hide 的高图中

Question

我正在使用 highcharts 的 addSeries 功能来动态添加系列。当我们添加系列时它工作完美，当我们 show/hide 添加系列的图表容器消失时出现问题。

App.component

export class AppComponent {
  name = 'Angular 4';
  chart: any = {};
  dip: boolean = true;
  saveInstance(chartInstance): void {
    this.chart = chartInstance;
  }
  constructor() {
    this.options = {
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },

      series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
      }]
    };
  }
  options: Object;
  addSeries() {
    this.chart.addSeries({
      data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
    });
  }
  toggle() {
    this.dip = !this.dip;
  }
}

即使我们 show/hide 图表容器如何保留添加的系列？

注意：在实际情况下，系列是动态添加的（没有预定义值）

Answer 1

演示： https://stackblitz.com/edit/angular4-x-range-highcharts-jrtvr2

而不是

<div *ngIf="dip">

使用

 <div [hidden]="dip">

实际上，每当您单击该按钮时，它都会再次加载图表。所以最好通过显示而不是加载来显示和隐藏。

Answer 2

文档指出 ng-show（及其兄弟 ng-hide）通过添加 CSS display: none 样式来切换元素的外观。另一方面，ng-if 实际上在条件为假时从 DOM 中删除元素，并且仅在条件变为真时才添加元素 .

因此，您必须使用 CSS 中的 hidden 或 display 属性。下面是一些代码片段：

选项 1：

<div [style.display]="!dip ? 'block' : 'none'">
   <chart [options]="options" (load)="saveInstance($event.context)" ></chart>
</div>

选项 2：

<div [hidden]="dip">
    <chart [options]="options" (load)="saveInstance($event.context)" ></chart>
</div>

演示：here

干杯！

添加的系列不会保留在图表容器 show/hide 的高图中

Added series does not remains in highcharts on show/hide of chart container

javascript

highcharts

angular2-highcharts