ヒントポイントカスタマイズ

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

• セルデータで作成されたグラフに人数と割合の両方を表示すること

• チャートのヒントポイントに単位・文字を追加すること

• 長すぎるチャートのヒントテキストを改行させること

• 組み合わせチャートで、縦棒グラフにマウスを合わせて、ノードの所属関係を表示させること

• ヒントポイントの背景色を換えるか、背景を画像に変更すること

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

2.機能の説明

2.1.ヒントポイントの設定：スタイル

効果は次のとおりです。

2.2.ヒントポイントの設定：画像

効果は次のとおりです。

2.3.ヒントポイントの設定：内容

ヒントポイントに、各月の割合と対応するブロックの前年比の変化値を表示します。効果は次のとおりです。

2.4.ヒントポイントの設定：内容書式

ガントチャートに組み込まれている「開始」、「終了」などのテキストの説明を削除したり、データ書式を変更したりできます。効果は次のとおりです。

2.5.ヒントポイントの設定：親ノードの表示

マウスを積み上げ縦棒グラフの一番上の棒に移動したら、系列の合計が表示されます。他の棒に移動したら、棒自体の実際の値を表示します。効果は次のとおりです。

2.6.ヒントポイントの設定：親ノードの表示

多層円グラフについてマウスを最も外側のノードに移動したら、現在のすべてのノードの親ノード名を表示します。

効果は次のとおりです。

1.データの準備

一般帳票を作成し、ビルトインデータセットEmbedded1を追加して、アクセス数を入力します。下の画像の通りです。

2.チャート挿入

フローティングチャートを例として、挿入-フローティング要素をクリックして、縦棒グラフ-縦棒グラフを選択します。

3.チャートデータ設定

対象チャートを選択し、右側にデータを選択します。下の画像の通りです。

4.スタイルの設定

スタイル-ヒントに入り、ヒントを使うにチェックを入れ、カスタムをクリックして、JSコードを入力し、HTMLでテキストの内容を解析をクリックします。下の画像の通りです。

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

function(){ 
return '<h2 align="center">'+ this.category+
'</h2><table border="1"cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">
<tr><td style="color:white;">種類</td>
<td style="color:white;"> '+this.seriesName+' </td>
</tr><tr>
<td style="color:white;">合計</td>
<td style="color:white;">'+this.value+'</td>
</tr> </table>';}

5.保存とプレビュー

帳票を保存して、改ページプレビューをクリックします。

1.テンプレートを開く

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-en\Advanced\Chart\PieChart\NormalPieChart.cptを開きます。

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

円グラフを選択し、ヒントを使うにチェックを入れ、カスタムをクリックして、JSコードを入力し、HTMLでテキストの内容を解析をクリックします。下の画像の通りです。

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

function() {return '<p><img src ="../../help/picture/logo-ch.png" align="middle"></p>';}

3.保存とプレビュー

帳票を保存して、改ページプレビューをクリックします。

1.テンプレートを開く

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\ doc\Advanced\Chart\PieChart\FloatingPieChart.cpt を開きます。

ヒントポイントに前年比を追加します。

2.帳票デザイン

下図に示すように最初にフィールドをセルにドラッグします。

注:フィールドはデフォルトとして垂直方向に拡張されます。リスト形式で表示する必要があるため、ここでは拡張しないように設定します。

3.スタイル設定

スタイル-ヒントをクリックし、ヒントを使うにチェックを入れ、カスタムをクリックして、JSコードを入力し、HTMLでテキストの内容を解析をクリックしてください。下の画像の通りです。

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

function(){
var m = contentPane.getCellValue(0,0,2);var z = contentPane.getCellValue(0,1,2);
var t = contentPane.getCellValue(0,2,2);var j= m.length;
for(var i=0;i<j;i++){if(this.seriesName ==m[i]){return '<div style="color:white;">
月：'+m[i]+' 割合：'+z[i]+' 前年同期比：'+t[i]+'</div>'}}}

月、割合、前年比を取得し、月の配列の長さを取得し、forループ、if判断により、系列名が月と等しい場合、ヒントポイントは以前に取得したセルフィールドを戻します。フォントの色をdivを通じて白に設定されています。
次に、123行を非表示にします。

チャートのタイトルを設定します。下の画像の通りです。

注：円内のテキストは、フローティング要素：テキストの挿入するから実現されます

frmテンプレートでは、次のコードを入力してください。

function(){
var a=$("td[id^=A3-]").text();var aa= a.split(",");
var b=$("td[id^=B3-]").text();var bb= b.split(",");
var c=$("td[id^=C3-]").text();var cc = c.split(",");
var d=$("td[id^=D3-]").text();var dd= d.split(",");
var j= aa.length;for(var i=0;i<j;i++){
if (this.seriesName == aa[i]){
return 'レベルお客様:\n'+aa[i]+'当月実績:'+ bb[i]+'\n当月計画:'+cc[i]+'\n達成率:'+dd[i];}}}

1.テンプレートを開く

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\ doc\Advanced\Chart\GanttChart\MachineStatusGanntChart.cptを開きます。

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

スタイル-ヒントをクリックし、ヒントを使うにチェックを入れ、カスタムをクリックして、JSコードを入力し、HTMLでテキストの内容を解析をクリックしてください。下の画像の通りです。

JS コードは次のとおりです：

function(){
var m = contentPane.getCellValue(0,0,2);var z = contentPane.getCellValue(0,1,2);
var t = contentPane.getCellValue(0,2,2);var j= m.length;
for(var i=0;i<j;i++){if(this.seriesName ==m[i])
{return '<div style="color:white;">月：'+m[i]+' 割合：'+z[i]+' 前月同期比：'+t[i]+'</div>'}}}

1.ガントチャートで対応されるパラメーターには、this.seriesName、this.processes []（リスト）、this.startTime、this.finishTime、this.duration、this.progress、this.id、this.processesIdが含まれます。
2.This.startTime、this.finishTimeはFineReportの時間形式を使用しているため、その前に+記号があることを注意を払ってください。

3.this.duration.as（'day'）は、時間＋単位を表し、year, month, day, hour, minute, secondにすることができます。

3.保存とプレビュー

帳票を保存して、改ページプレビューをクリックします。

1.テンプレートを開く

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFuction\Custom_labels_for_series_and_column_chart.cpt

を開きます。

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

スタイル-ヒントをクリックし、ヒントを使うにチェックを入れ、カスタムをクリックして、JSコードを入力し、HTMLでテキストの内容を解析をクリックしてください。下の画像の通りです。

JSコードは次のとおりです：

function() {
var vanchart = this.series.vanchart,
series = vanchart.series;
if (!vanchart.seriesOfType) {
series = series.column;
}
var ser;
for (var i = series.length - 1; i -= 0; i--) {
if ((ser = series[i]).visible && this.points[i].getTargetValue() != 0) {
break;}}
if (ser && ser == this.series) {
var points = this.points,
value = 0; /*現在カテゴリ下にある全てのヒントポイントを取得する*/
for (var i = 0, len = points.length; i < len; i++) {
if (points[i].series.visible) {
value += points[i].getTargetValue() /*ヒントポイントの値を取得する*/
}}
return value;} /*加算した値を返す*/
else {return this.value;}} /*各ヒントポイントの値を返す*/

注：テキストの形式の混乱を避けるために、コードをコピーした後にコメントを削除することをお勧めします。

3.保存とプレビュー

帳票を保存して、改ページプレビューをクリックします。

1.テンプレートを開く

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Chart\CustomHTMLFuction\Multi-layer_pie_chart.cptを開きます。

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

スタイル-ヒントをクリックし、ヒントを使うにチェックを入れ、カスタムをクリックして、JSコードを入力し、HTMLでテキストの内容を解析をクリックしてください。下の画像の通りです。

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

function() {
var currentNode = this,
root = currentNode.series.root,
nodePath = currentNode.name;
while ((currentNode = currentNode.parent) && currentNode != root) {
nodePath += (" 上級ノード:" + currentNode.name)
}
return nodePath;
}

3.保存とプレビュー

帳票を保存して、改ページプレビューをクリックします。