图表Y轴开启轴逆序

1.1 问题描述

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

1.2 实现思路

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

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

2.2 插入图表

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

另外，在 H1 和 I1 单元格拖入数据列姓名和销售额，如下图：

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

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

2.3 图表数据设置

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

2.4 设置坐标轴

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

自定义轴标签样式，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解析文本内容，用图片填充标签，直观展示排名，如下图所示：

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 端

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

2）移动端

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

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

点击下载模板：CustomAxisLabel.cpt