反馈已提交

网络繁忙

范围面积图

  • 文档创建者:axing
  • 历史版本:9
  • 最近更新:Carly 于 2023-08-28
  • 1. 概述

    1.1 版本

    报表服务器版本
    11.0

    1.2 预期效果

    面积图可设置为范围显示效果,如下图所示:

    image.png

    1.3 实现思路

    图表添加条件属性,通过设置系列的填充颜色和线型实现范围面积效果,通过自定义 JS 实现标签和提示效果。

    2. 示例

    2.1 准备数据

    点击设计器左上角「文件>新建普通报表」,在模板左下方新建 内置数据集 ds1。如下图所示:

    image.png

    2.2 插入图表

    合并一片单元格区域,点击上方工具栏插入图表按钮,插入「堆积面积图」。如下图所示:

    Snag_23ea6206.png

    2.3 图表数据

    选中面积图,绑定数据如下图所示:

    1616398137830778.png

    2.4 设置图表条件属性

    1)使用前提

    如需设置条件属性-不透明度,需要先关闭「图表-样式-系列」的「渐变风格」,否则不透明度无法设置。

    2)设置步骤

    在图表「特效>条件显示」中添加一个条件属性,设置如下:当系列序号等于 1 时,填充颜色的不透明度为 0 。

    1616398424628886.png

    2.5 设置图表样式

    1)在图表「样式>标签」中,勾选使用标签,自定义返回内容,使得「差值」系列显示的标签值为「差值+最低」的和。

    输入 JavaScript 代码:

    function(){ 
     if(this.seriesName=="差值"){
      return (this.points[0].value+this.points[1].value).toFixed(1); //如果系列为「差值」,返回差值系列的值加最低系列的值,保留一位小数
      };
      return this.value; //返回实际值,即最低系列的值
    }

    1616398855529352.png

    2) 在图表「样式>提示」中,勾选「使用数据点提示」,自定义返回内容。输入 JavaScript 代码:

    function(){    
      var value="<font color='white'>"+this.category+"<br>最低:"+this.points[0].value+"<br>最高:"+(this.points[0].value+this.points[1].value).toFixed(1)+"</font>";
      return value;
    }

    1616398837271557.png

    3)在图表「样式>提示」中,勾选「显示所有系列」。可使所有系列提示点由直线连接一同显示。

    1657006115534999.png

    2.6 效果预览

    2.6.1 PC 端

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

    image.png

    2.6.2 移动端

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

    注:移动端标签正常显示,提示没有显示最高值,还是显示差值。

    image.png

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\AreaChart\范围面积图.frm

    点击下载模板:范围面积图.frm

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持