我在“离子幻灯片”中的 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;
}
在离子幻灯片之外,图表(即使它们在离子网格中)是响应式的。
我该怎么做才能使位于离子滑道中的离子网格内的 ngx-chart 响应?