图表标签文字纵向排列

  • 文档创建者:axing
  • 编辑次数:9次
  • 最近更新:Leo.Tsai 于 2020-10-16
  • 1. 概述

    1.1 应用场景

    当图表分类和系列过多时,图表标签文字横向显示较为拥挤,希望可以实现文字纵向显示,效果如下图所示:

    Snag_f40226.png

    1.2 实现思路

    使用自定义标签,然后返回的标签值中拼接 HTML 样式,最后设置使用 HTML 解析文本内容。

    注:该方法不支持悬浮元素图表和决策报表内的图表。

    2. 示例

    2.1 数据准备

    新建普通报表,新建数据集 ds1,数据库查询语句为:SELECT * FROM 销量

    Snag_e14ebf.png

    2.2 报表设计

    1)单元格新增一个柱形图,如下图绑定数据:

    Snag_e67fbe.png

    2)图表属性面板选择样式>标签,勾选使用标签,然后编辑自定义返回值,点击使用 HTML 解析文本内容,最后设置标签位置为内侧。自定义代码如下:


    function(){  
        return "<div style='width:10px;line-height:12px;white-space:normal'>"+this.value+"</div>";
    }

    Snag_f6f8b4.png

    2.3 效果预览

    保存报表,点击分页预览,效果如应用场景中所示。

    注:不支持移动端。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\Chart\图表标签文字竖向排列.cpt

    点击下载模板:图表标签文字竖向排列.cpt

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!