チャートラベルカスタマイズ

1.アプリケーションシナリオ

本文の方法により下記の要望を実現することができます。

• 円グラフ系列ラベルのフォントサイズは、色を変更せずに大きくしい時。

• —チャートラベルを比率で表示したい時。

• —同じグラフに2つのデータ書式でラベルを表示したい時。

• —ラベルでカテゴリ下の系列の合計を表示したい時。

• —チャートラベルの系列の値を合計し、外側に表示したい時。

• —チューブメーターに画像を追加したい時。

2.操作方法

スタイル-ラベル-内容でテキストをカスタマイズして、JavaScriptコードを入力し、HTMLでテキストの内容を解析することによりラベルのカスタマイズを実現することができます。詳しい設定方法については、HTMLでテキストの内容を解析を参照してください。
注：単一系列のラベルをカスタマイズする方法については、単一系列ラベルのカスタマイズを参照してください。

1.例1：ラベル画像カスタマイズ

1.テンプレートを準備します

ビルトインテンプレート：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\NewColumnChart\CustomAxisLabel.cptを開きます。

2.ラベルの設定

セル要素パネルでスタイル-ラベルを選択し、ラベルにチェックを入れ、カスタムをクリックして、カスタムスタイルコードを入力します。その後、HTMLでテキストの内容を解析を有効にし、画像に応じて背景の幅と高さを設定します。

JavaScriptコードは次のとおりです。

function() {
if(this.value==$("td[id^=I1-]").text()) return '<table > <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 > <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 > <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 > <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 > <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 > <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 > <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 > <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 > <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 > <tr valign=middle align=center> <td><img src ="../../help/picture/icon_top10.png"></td> </tr></table>';else return this.value;
}

HTMLをカスタマイズするときに、ラベルのサイズを指定できます。内容がHTMLで指定されていて、ラベルサイズを特定できない場合は、HTMLで設定されたラベルの幅と高さに従います。

注1：ラベル、座標軸ラベル、コードンラベルおよびlabelを含みます（データ・ポイントプロンプトを除く）。
注2：ラベルの内容が表示される位置をHTMLで設定できます。設定したサイズ範囲内でラベルの内容を表示しきれない場合は、表示されない部分が切り捨てられます。
$("td[id^=I1-]").text()とは、セルI1の内容を取得することを指します。ラベル値がI1に等しい場合、ラベルは固定画像top1-18.pngとして表示されます。それ以下も同じです。
注3：I1によって展開されたデータは、SQLでは降順で並べ替えられています。
画像は%FR_HOME%\webapps\webroot\help\pictureフォルダーに保存されます（下図）。

3.プレビュー

2.例2：ラベルデータ書式の設定

1.データの準備

一般帳票を作成し、データセットds1を追加します。その後、各時間帯の売上を集計します。

2.チャート挿入

セルグラフを例にします。複数のセルを結合して、縦棒グラフを挿入してください。

3.チャートデータ設定

チャートを選択し、右側のプロパティパネルの中にデータを選択して、下図に示すようにチャートデータを設定します。

4.チャートスタイル設定

右側のプロパティパネルのスタイル-ラベルを選択し、カスタムをクリックします。その後、コードを入力し、HTMLでテキストの内容を解析をクリックします。

ここでは、 FR.contentFormat(value, '#.##%')で数値書式を設定します。後の'#.##%'は、実際のニーズに応じて変更できます。
この例では、比率=カテゴリ1の系列/すべてのカテゴリの系列の合計を計算し、比率の形式は'#.##%'にします。

JavaScriptコードは次のとおりです。

function() {
Var points = this.series.points;//すべてのデータ・ポイントを取得
var total = 0;
for (var i = 0, len = points.length; i < len; i++) {
total += points[i].value;//カテゴリ下の系列の合計を求めます
}
return FR.contentFormat(this.value / total, '#.##%'); //比率を求めます
}

セル要素-スタイル-座標軸-X軸を選択し、書式を設定します。

タイトルや系列間隔の調整など、必要に応じてチャート属性テーブルでチャートスタイルをさらに設定できますが、ここでは省略います。

5.プレビュー

3.例3：カテゴリーラベル集計のカスタマイズ

1.データ準備

一般のレポートを作成し、データセットFile1を追加します。

2.チャート挿入

セルグラフを例にします。複数のセルを結合して、縦棒グラフ-積み上げ縦棒グラフを挿入します。

3.チャートデータの設定

チャートを選択し、右側のプロパティパネルの中にグラフ要素を設定します（下図）。

4.スタイルの設定

右側のプロパティパネルのスタイル-ラベルを選択し、ラベルの使用を有効にします。カスタムをクリックして、スタイルコードを挿入し、HTMLでテキストの内容を解析をクリックしててください。

JavaScriptコードは次のとおりです。

function() {
var point = this;
var series = this.series;
var points = this.points;/*現在カテゴリ下のすべてのポイントを取得する*/
var validPoints = points.filter(function(p) {
return p.series.visible && p.visible && !p.isNull;/*現在カテゴリ下の有効ポイントを取得する*/
});
var len = points.length;
var vlen = validPoints.length;
if (point == validPoints[vlen - 1]) {
var value = 0;
for (var i = -1; ++i < len;) {
if (points[i].series.visible) {
value += points[i].getTargetValue();/*ポイントの値を取得する*/
}
}
return value;/*加算した値を返す*/
} else {
return "";/*各系列の値を返す*/
}
}

5.プレビュー

4.例4：ラベルをカスタム系列カテゴリー合計にする

1.テンプレートを準備する

デザイナービルトインテンプレートを開きます。

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFunction\Combination_chart_label_custom_series_sum.cpt

2.棒グラフラベルの設定

棒グラフラベルにカスタムを選択して、カスタムコードを挿入します。HTMLでテキストの内容を解析をクリックし、位置を外側に設定してください（下図）

JavaScriptコードは次のとおりです

function() {
var point =    this;
var points =    this.points;
var val =    0;    
/*points.length-2棒グラフの現在のカテゴリの下にある系列ポイントの最後のポイントを取得します
-2は、添え字が0で始まり、折れ線グラフの系列の数を差し引くためです。
上記の折れ線グラフの系列ポイント数は1つだけです*/
if (point == points[points.length -    2]) {
/* points.length - 1 折れ線グラフの系列ポイント数を差し引きます */
for ( var i =    0; i < points.length -    1; i++) {
val += points[i].value
}
return val;
}    else{
return "";
}
}

3.折れ線ラベルの設定

折れ線グラフに一般的なラベルを設定し、値にチェックを入れてください（下図）。

4.プレビュー

5.例5：ラベルフォント設定

1.テンプレートを準備します

ビルトインテンプレートを開きます。

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFunction\RoseChart.cpt 

2.ラベルの設定

チャートを選択して、右側のプロパティパネルのスタイル>ラベルを選択し、ラベルの使用を有効にします。

カスタムをクリックし、スタイルコードを挿入します。HTMLでテキストの内容を解析をクリックし、位置に円外と引き出し線を選択してください。

JavaScriptコードは次のとおりです。

function(){
return '<span hljs-keyword">this.color+';"> '+this.value+' </span>'; //ラベル系列色
}

3.プレビュー