[英]Ionic 4 and ngx-charts - Problem with responsiveness in ion-grid inside an ion-slide
我在“離子幻燈片”中的 ngx-Charts,或更准確地說,位於“離子幻燈片”中的“離子網格”中的 ngx-Chart 的響應能力有問題。
為了使圖表具有響應性,我發現了兩個規則。 有人說,你不應該在 ngx-Chart 中使用“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;
}
在 ion-slide 之外,圖表(即使它們在離子網格中)是響應式的。
我該怎么做才能使位於離子幻燈片中的離子網格內的 ngx-chart 具有響應性?
我自己找到了一個可能的解決方案。
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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.