Question

我正在使用highcharts的addSeries功能来动态添加系列。当添加序列时，它运行良好，当显示/隐藏添加序列图的容器时，会出现问题。

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;
  }
}

即使我们显示/隐藏图表容器，如何保留添加的系列？

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

Answer 1

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

代替

<div *ngIf="dip">

使用

 <div [hidden]="dip">

实际上，只要您单击该按钮，它就会再次加载图表。因此最好通过显示而不是加载来显示和隐藏。

Answer 2

文档指出，n g-show（及其同级ng-hide）通过添加CSS display：none样式来切换元素的外观。另一方面，ng-if实际上是在条件为false时从DOM中删除元素，并且仅在条件变为true时才将元素重新添加。

因此，您必须使用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

干杯！

添加的系列在图表容器的显示/隐藏中不会保留在高级图表中

2 个答案: