Ионные 4 и ngx-диаграммы - проблема с отзывчивостью в ионной сетке внутри ионного слайда - PullRequest
Новая
       53

Ионные 4 и ngx-диаграммы - проблема с отзывчивостью в ионной сетке внутри ионного слайда

0 голосов
/ 03 июня 2019

У меня проблемы с отзывчивостью ngx-карт внутри "ионного слайда", или, точнее, ngx-графика внутри "ионной сетки", которая находится в "ионном слайде".

Чтобы график был отзывчивым, я нашел два правила.Кто-то говорит, что вы не должны использовать параметр "view" внутри ngx-Chart.Второй говорит, что тег окружения / родителя должен иметь размер.Если оба факта верны, диаграмма должна адаптироваться к размеру родительского.

Я даже заставил это работать (быть отзывчивым) внутри сетки - сетки на «обычной» странице, но я не могучтобы заставить его работать (быть отзывчивым) внутри сетки в слайде.

Пожалуйста, посмотрите мой пример проекта на GitHub https://github.com/Joey73/ionic-ngx-charts.git (страницы: Treemap и Treemap в Slide).

treemap-in-slide.page.html: 

...
<ion-content>
  <ion-slides pager="true" [options]="slideOpts">

    <!-- The chart in this slide works / is responsive -->
    <ion-slide class="chart-wrapper">
      <ngx-charts-tree-map
        [scheme]="colorScheme"
        [results]="treemapData"
        (select)="onSelect($event)">
      </ngx-charts-tree-map>
    </ion-slide>

    <!-- The chart in this slide is not responsive - it's inside a grid -->
    <ion-slide>
      <ion-grid>
        <ion-row>
          <h1>TreeMap in ion-grid</h1>
        </ion-row>
        <ion-row>
          <ion-col size="12">
            <div class="chart-wrapper">
              <ngx-charts-tree-map
                [scheme]="colorScheme"
                [results]="treemapData"
                (select)="onSelect($event)">
              </ngx-charts-tree-map>    
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-slide>
  </ion-slides>    
</ion-content>

treemap-in-slide.page.scss 

.chart-wrapper {
    max-height: 35vh;
    overflow: hidden;
}

Вне графика ионного скольжения диаграммы (даже если они находятся вионная сетка).

Что я могу сделать, чтобы адаптировать диаграмму ngx, находящуюся внутри ионной сетки, которая находится в ионном слайде?

1 Ответ

0 голосов
/ 04 июня 2019

Я сам нашел возможное решение.

html: 

...
<ion-slide>
  <ion-grid>
    <ion-row>
      <h1>TreeMap in ion-grid</h1>
    </ion-row>
    <ion-row>
      <ion-col size="12">
        <div>
          <ngx-charts-tree-map
            (window:resize)="onResize($event)"
            [scheme]="colorScheme"
            [results]="treemapData"
            (select)="onSelect($event)"
            [view]="view">
          </ngx-charts-tree-map>    
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-slide>
...

ts: 

...
export class TreemapInSlidePage {
  title = 'ngx Treemap in Slider with Ionic 4';

  treemapData: any[];

  slideOpts = {
    initialSlide: 0,
    speed: 400
  };

  view: any[] = [700, 400];

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA', '#4381D1', '#65ECE4']
  };

  constructor() {
    if (innerWidth > 992) {
      this.view = [innerWidth - 300, 400];
    } else {
      this.view = [innerWidth, 400];
    }
    Object.assign(this, { treemapData });
  }

  onResize(event) {
    if (event.target.innerWidth > 992) {
      this.view = [event.target.innerWidth - 300, 400];
    } else {
      this.view = [event.target.innerWidth, 400];
    }
  }

  onSelect(event: Event) {
    console.log(event);
  }
}

global.scss: 

...
.split-pane-visible >.split-pane-side {
    min-width: 300px!important;
    max-width: 300px!important;
}
...