Y軸を逆順で表示

1.問題の説明

本マニュアルでは、棒グラフを例にしています。クエリーで取得したY軸データは昇順で並べ替えられていますが、表示の際はそのデータを降順に変更して、次の画像に示す効果を実現したい場合があります。

2.実現方法

1.データの準備

一般帳票を作成し、データセットds1を添加します。ビルトインデータ接続FRDemoを使用し、SQL文は以下の通りです。

SELECT EMPNAME as Name,round(sum(QUANTITY*PRICE),1) as SalesFROM EMPLOYEE,ORDERS,ORDERSDETAILwhere EMPLOYEE.EMPID= ORDERS.EMPID and ORDERS.ORDERID=ORDERSDETAIL.ORDERIDgroup by EMPNAMEorder by sum(QUANTITY*PRICE) desc limit 10

2.チャート挿入

SQL文が示しているように、売上は降順で並べ替えなければなりません。

設定後、H列とI列を非表示にします。

3.チャートデータ設定

下の画像の通り、チャートを選択し、右側のグラフ要素の中にセル要素-データを選択します。

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()は取得されたセルの内容です。

上位三名はそれぞれH1、2、3の展開値に対応します。つまり、座標値がH1として設定した場合、座標軸はTop1+H1で表示されます。第2と第3位もそうです。

6.ラベルの設定

スタイル-ラベルを選択し、ラベルのテキストをカスタマイズします。JavaScriptコードを入力して、[HTMLでテキストの内容を解析]をクリックすることにより、ラベルに画像を追加し、ランキングを一目瞭然に表示します。

カスタム背景の幅を120に、カスタム背景の高さを90に設定します。下の画像の通りです。

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;}

7.プレビュー

1.PC端末

レポートを保存し、改ページプレビューをクリックすると、グラフの効果は下図のようになります。

2.モバイル端末

APPとH5端末でプレビューできますが、軸反転のみが有効で、ラベルをカスタム表示できません。