图表自定义多系列提示

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

    1.1 问题描述

    当图表的样式>提示>显示策略中勾选了显示所有系列时,使用自定义提示默认的代码只能显示一个系列的提示,如下图所示:

    1.png

    默认代码的自定义提示不符合实际应用场景的需求,希望每个系列分行提示,且在提示值后面加上「万元」两个字,如下图所示:

    2.png

    1.2 解决思路

    修改默认生成的 JS 代码,使用 for 循环遍历系列修改对应的值,使用 HTML 标签来美化效果。

    2. 示例

    2.1 数据准备

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

    Snag_c3ed6d.png

    2.2 报表设计

    1)合并一片区域的单元格,插入柱形图,如下图绑定图表数据:
    Snag_c7915a.png


    3)柱形图样式>提示中勾选使用数据点提示,输入自定义提示点代码,并选择使用html解析文本内容,如下图所示:

    Snag_cf7d0f.png

    JS 代码如下:

    function(){ 
    var points = this.points; 
    var value = "<b><font size=2.5 color='white'>" + this.category;     
        for(var i = 0;i < points.length;i++) {              
            if(points[i].series.visible){             
                value += '<br/>'+"<font color='"+points[i].color+"'>●</font>"+points[i].seriesName+':'+points[i].value+"万元";         
            }    
        } 
        return value+"</font></b>"; 
    }

    4)柱形图样式>提示>显示策略中勾选显示所有系列,如下图所示:

    Snag_d6debe.png

    2.3 效果预览

    1)PC 端

    保存报表,点击分页预览,效果如下图所示:

    2.png


    2)移动端

    image.png

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\Chart\图表自定义多系列提示.cpt

    点击下载模板:图表自定义多系列提示.cpt

    附件列表


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