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

浅浅的花香味﹌ 2023-05-30 04:58 6阅读 0赞

参考资料：  
1、[如何正确使用函数\[ngStyle\]][ngStyle]  
  
先上图：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70][]  
  
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的高度  
 **

[ngStyle]: https://cloud.tencent.com/developer/ask/131396
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191107150144385.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWxlbl9qYWs=,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，6人围观）

还没有评论，来说两句吧...

相关阅读

相关 OC动态计算文字的高度

示例代码：_teacher_introduce = [[UILabel alloc] init];[self addSubview:_teacher_introduce]...

小咪咪/ 2024年05月03日 14:42/ 0 赞/ 39 阅读

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

参考资料： 1、[如何正确使用函数\[ngStyle\]][ngStyle] 先上图： ![watermark_type_ZmFuZ3poZW5naGVpdG

浅浅的花香味﹌/ 2023年05月30日 04:58/ 0 赞/ 7 阅读

相关如何正确使用函数[ngStyle] （赞，实用）

原文出处：[https://cloud.tencent.com/developer/ask/131396][https_cloud.tencent.com_developer_

朱雀/ 2023年05月29日 13:05/ 0 赞/ 172 阅读

相关 TimeSpan格式化 (实用、赞）

原文出处：[https://blog.csdn.net/cxb2011/article/details/103538849/][https_blog.csdn.net_cxb2

雨点打透心脏的1/2处/ 2022年12月27日 08:38/ 0 赞/ 138 阅读

相关 WEB-互补色与对比色的计算与获取 (实用、赞）

原文出处：[http://blog.ipodmp.com/2014/03/web-and-calculation-of-complementary-and-contrastin

我就是我/ 2022年12月05日 12:08/ 0 赞/ 157 阅读

相关根据背景图片计算文字颜色（实用、赞）

原文出处: [https://www.it1352.com/533401.html][https_www.it1352.com_533401.html] 延伸阅读： 1

系统管理员/ 2022年12月05日 00:54/ 0 赞/ 188 阅读

相关 Ionic3+ECharts图表 (赞)

原文出处:[https://blog.csdn.net/a1\_a1\_a/article/details/80104770][https_blog.csdn.net_a1_a

忘是亡心i/ 2022年05月18日 04:35/ 0 赞/ 264 阅读

相关 ionic开发中动态设置ion-scroll的高度（赞）

原文出处：[https://blog.csdn.net/jinrui\_w/article/details/51491716][https_blog.csdn.net_jinr

爱被打了一巴掌/ 2022年05月15日 10:42/ 0 赞/ 256 阅读

相关 em的计算方法(实用、赞）

之前据我所了解css中em不是一个固定值，而是一个相对值，它的值等于父元素的font-szie，即1em=父元素的font-szie，如果父元素没有font-szie那么取浏览

红太狼/ 2022年04月15日 05:51/ 0 赞/ 232 阅读

相关实用色轮图（赞、实用）

原文出处：[https://www.jb51.net/photoshop/228718\_2.html][https_www.jb51.net_photoshop_228718

痛定思痛。/ 2021年12月12日 13:45/ 0 赞/ 306 阅读