Добавленная серия не остается в верхних чартах при показе / скрытии контейнера графика - PullRequest
Новая
       12

Добавленная серия не остается в верхних чартах при показе / скрытии контейнера графика

0 голосов
/ 18 сентября 2018

Я использую addSeries функцию старших графиков для динамического добавления серий.Он отлично работает, когда мы добавляем серии, проблема возникает, когда мы показываем / скрываем контейнер добавленной серии, диаграммы исчезают.

demo

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

Как сохранить добавленные серии, даже если мы показываем / скрываем контейнер диаграммы?

Примечание. В реальном случае серии добавляются динамически (нет предопределенных значений)

Ответы [ 2 ]

0 голосов
/ 18 сентября 2018

В документации говорится, что n g-show (и его родной ng-hide) переключают внешний вид элемента, добавляя отображение CSS: стиль отсутствует.ng-if, с другой стороны, фактически удаляет элемент из DOM, когда условие ложно, и добавляет элемент обратно только после того, как условие становится истинным .

Итак, вам придется работать с hidden или display свойство из CSS.Ниже приведены некоторые фрагменты кода:

Вариант 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>

Демонстрация: здесь

Ура!

0 голосов
/ 18 сентября 2018

Демо: https://stackblitz.com/edit/angular4-x-range-highcharts-jrtvr2

Вместо 

<div *ngIf="dip">

используйте 

 <div [hidden]="dip">

На самом деле, когда вы нажимаете на эту кнопку, еезагрузка диаграммы снова.Так что лучше показывать и прятать через дисплей, а не загружать.

...