巧用ngStyle动态计算图表的高度（赞，实用）

原创于 2019-11-07 15:02:37 发布 · 646 阅读

0 ·

CC 4.0 BY-SA版权

实用同时被 3 个专栏收录

738 篇文章

订阅专栏

Ionic3

175 篇文章

订阅专栏

ECharts

26 篇文章

订阅专栏

本文详细介绍了在Angular框架中，如何使用[ngStyle]指令动态计算并设置柱状图的高度。通过实例代码展示了如何根据数据条目数量计算图表所需的高度，并将其应用到HTML元素上。

参考资料：
1、如何正确使用函数[ngStyle]

先上图：

html

<div class="chart-box chart-bar" [ngClass]="{'hidden': !showChartBar1}">
    <div class="title-bar">
        <span class="remark">{{chartBarTitle}}：</span>
        <span class="title">实收合计: {{totalBarValue}}</span>
    </div>

    <div id="chart-bar1" class="chart bar" [ngStyle]="getChartHeight()"></div>
</div>

关键：
[ngStyle]="getChartHeight()" 这行

js

// 动态计算柱状图的高度
private getChartHeight(): object {
    let barCount: number = 0;
    ...
    let h = 17 * barCount + 30 + 20 + 20;   //总行高+grid.top+grid.bottom+grid.label高度  
    if (h < 150) {
        h = 150;
    }
    return { 'height': h.toString() + 'px' };
}

计算出有多少条bar, 再乘以bar的高度