图表不会随容器调整大小答案

【问题标题】：Charts will not resize with container图表不会随容器调整大小
【发布时间】：2020-04-10 04:00:18
【问题描述】：

我在自定义容器内使用 ng2 折线图，看起来像垫卡。当导航面板隐藏并显示整个页面时，容器会调整大小，但图表不会。如果我将它们放在自己的行上，它们会调整大小，但它们不会彼此相邻。出于 UI 目的，我想将它们并排放置。

之前：

之后：

这是图表的代码

    <div class="flex-item">
        <div style="display: block;">
            <canvas
                baseChart
                [datasets]="lineChartData"
                [labels]="lineChartLabels"
                [legend]="false"
                [colors]="lineChartColors"
                [chartType]="lineChartType"
            ></canvas>
        </div>
    </div>
</div>

这是容器的css

.falseCard {
    background-color: white;
    padding: 1em;
    width: 100%;
    display: flex;
    border-radius: 4px;
}

它所在页面的html

<div fxLayout="row" fxLayoutGap="16px">
        <div class="falseCard mat-elevation-z2"><ls-new-users-chart-widget></ls-new-users-chart-widget></div>
        <div class="falseCard mat-elevation-z2"><ls-active-users-chart-widget></ls-active-users-chart-widget></div>
    </div>

【问题讨论】：

标签： html css angular angular-material ng2-charts

【解决方案1】：

你可以使用一些configuration options for responsive charts。

您肯定希望将responsive 设置为true。根据您提供的图像，您似乎只想水平调整图表大小，因此我建议您将 maintainAspectRatio 设置为 false。

在图表组件类中创建配置对象

lineChartOptions: ChartOptions = { // 不要忘记从 chart.js 导入 ChartOptions 类型响应式：真实，保持纵横比：假 }
将配置对象绑定到模板中baseChart 的options

【讨论】：