图表Y轴开启轴逆序

  • 文档创建者:文档助手1
  • 编辑次数:51次
  • 最近更新:Leo.Tsai 于 2020-07-20
  • 1. 概述

    1.1 问题描述

    以条形图为例,查询得到的Y轴数据为升序排序,现在想要前端展示时将排序改为降序,实现下图所示的效果:

    1594877906615062.png

    1.2 实现思路

    图表属性面板样式>坐标轴>Y轴>位置下,开启轴逆序即可,如下图所示:

    Snag_c1a25.png

    2. 示例

    2.1 准备数据

    新建普通报表,添加 ds1 数据集,SQL 语句如下:

    SELECT  姓氏||名字 as 姓名,round(sum(单价*数量*(1-折扣)),2) as 销售额

    FROM S雇员,S订单,S订单明细

    where S雇员.雇员ID=S订单.雇员ID and S订单.订单ID=S订单明细.订单ID

    group by 姓氏||名字

    order by sum(单价*数量*(1-折扣)) desc limit 10

    Snag_da0e4.png

    2.2 插入图表

    以单元格图表为例,合并一片单元格,点击插入>单元格元素>插入图表,选择条形图(新特性)-条形图

    另外,在 H1 和 I1 单元格拖入数据列姓名和销售额,如下图:
    Snag_104373.png

    此处销售额必须是降序排列,可以看到 SQL 中已进行过该操作。

    设置完成后隐藏 H 和 I 列。


    2.3 图表数据设置

    选中图表,在右侧图表属性表中选择图表属性表-数据,如下图所示:

    image.png

    2.4 设置坐标轴

    选择样式>坐标轴>Y轴,点击开启轴逆序,格式选择自定义,如下图所示:

    image.png

    自定义轴标签样式,JavaScript 代码如下:

    function()
     {var a;  if (this == $("td[id^=H1-]").text()){ 
    a="Top1"+$("td[id^=H1-]").text();} else if (this 
    ==$("td[id^=H2-]").text()){ a="Top2"+ $("td[id^=H2-]").text();}     else
     if(this==$("td[id^=H3-]").text()){ a="Top3"+$("td[id^=H3-]").text(); } 
          else  { a=this}   return a; }

    $("td[id^=H1-]").text()即获取单元格的内容;

    Top1、2、3 分别对应扩展出来的 H1、2、3的值,即定义坐标值为 H1 时,坐标轴显示为 Top1+H1,以此类推。

    2.6 设置标签

    选择样式>标签,自定义标签文本内容,输入 JavaScript 代码后,点击使用HTML解析文本内容,用图片填充标签,直观展示排名,如下图所示:

    Snag_13ed6546.png

    JavaScript 代码如下:

    function() {
        if (this.value == $("td[id^=I1-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top1-18.png" ></td> </tr></table>';
        else if (this.value == $("td[id^=I2-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top2-19.png" ></td> </tr></table>';
        else if (this.value == $("td[id^=I3-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top3-20.png" ></td> </tr></table>';
        else if (this.value == $("td[id^=I4-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top4.png" ></td> </tr></table>';
        else if (this.value == $("td[id^=I5-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top5.png" ></td> </tr></table>';
        else if (this.value == $("td[id^=I6-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top6.png" ></td> </tr></table>';
        else if (this.value == $("td[id^=I7-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top7.png" ></td> </tr></table>';
        else if (this.value == $("td[id^=I8-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top8.png" ></td> </tr></table>';
        else if (this.value == $("td[id^=I9-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top9.png" ></td> </tr></table>';
        else if (this.value == $("td[id^=I10-]").text()) return '<table style="width:100%;height:100%;"> <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top10.png" ></td> </tr></table>';
        else return this.value;
    }

    2.7 预览效果

    1)PC 端

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

    1594877906615062.png

    2)移动端

    同时支持 App 端和 H5 端,但只支持轴逆序,不能显示自定义标签,如下图所示:

    1595212895225995.jpg

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\NewColumnChart\CustomAxisLabel.cpt

    点击下载模板:CustomAxisLabel.cpt

    附件列表


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