离子 4 和 ngx 图 - 离子载玻片内离子网格的响应性问题

Question

我在"离子幻灯片"中ngx图表的响应能力方面遇到了问题，或者更准确地说，驻留在"离子幻灯片"中的"离子网格"中的ngx图表。

为了使图表具有响应性，我发现了两个规则。有人说，你不应该在ngx图表中使用"view"参数。 第二个说，周围的/父标签应该有一个大小。如果两者都为真，则图表应适应父级的大小。

我什至让它在网格内工作(响应式) - "通常"页面上的网格，但我无法让它在幻灯片内的网格内工作(响应式)。

请参阅我在 GitHub https://github.com/Joey73/ionic-ngx-charts.git 上的示例项目(页面：幻灯片中的树状图和树状图)。

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图响应？

Answer 1

我自己找到了一个可能的解决方案。

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