反馈已提交

网络繁忙

分类坐标轴显示数值指标

  • 文档创建者:caott666
  • 编辑次数:6次
  • 最近更新:Alicehyy 于 2021-10-25
  • 1. 概述

    1.1 应用场景

    有时候我们需要对图表的分类坐标轴设置具体的指标,以便了解当前工作的实际进度,效果如下图所示:

    Snag_38d20138.png

    1.2 实现思路

    自定义 X 轴的轴标签格式,通过接口函数FR.remoteEvaluate( formula )和内置的报表函数VALUE(tableData,targetCol,orgCol,element)实现。

    Snag_38d7c21f.png

    2. 示例

    2.1 数据准备

    1)新建普通报表,新建内置数据集 ds1,如下图所示:

    1.png

    2)新建内置数据集 ds2,其中的 percents 字段是各销售员销量占总销量的占比,如下图所示:

    2.png

    2.2 插入图表

    合并一片区域单元格,插入柱形图,如下图所示:

    1611541845149303.png

    2.3 绑定数据

    绑定柱形图数据,用于显示每个销售员每种产品的销量情况,如下图所示:

    Snag_38dee6ac.png

    2.4 自定义轴标签

    点击「样式>坐标轴>X轴」,轴标签格式处点击「自定义」按钮,填入 JavaScript 代码后,要选择「使用html解析文本内容」,如下图所示:

    Snag_38ee4ea4.png

    JavaScript 代码如下:

    function(){ 
            //value函数返回百分比数据,返回经过计算的公式的结果
            var a=(FR.remoteEvaluate("value('ds2',2,1,'" + this+ "')")*100).toFixed(1); 
            //轴标签同时显示分类名和百分比,且韩文和张武的轴标签为红色
            if(this=='韩文'||this=='张武'){
            return "<font color='red'>"+this+":"+a+"%"+"</font>"     }else{
            return this+":"+a+"%";
        }
    }

    2.5 效果预览

    2.5.1 PC端

    保存模板,点击分页预览,如下图所示:

    Snag_38d20138.png


    2.5.2 移动端

    同时支持 App 端和 H5 端,效果如下图所示:

    1611543261495315.jpg

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\NewColumnChart\分类坐标轴显示数值指标.cpt

    点击下载模板:分类坐标轴显示数值指标.cpt

    4 注意事项

    预览模板,如果出现弹窗“此调用存在安全风险,如需使用请在安全管理中修改脚本调用公式限制”,且数据出现“NaN%”,如下图所示:

    2020-12-31_09-33-29.jpg

    那么需要登录数据决策系统,点击管理系统>安全管理>安全防护>脚本调用公式限制,关闭该功能,如下图所示:

    1609378814198213.jpg

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    在线QQ(将在2023.01.05关停):800049425

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    7*24h

    智 能客 服