範囲面グラフ

1.バージョン

2.機能概要

面グラフは範囲表示の効果を設定できます。以下の図のように表示されます：

3.実現方法

グラフに条件属性を追加し、系列の塗りつぶし色と線種を設定することで、範囲面積効果を実現します。さらに、カスタムJSを使用してラベルとツールチップの効果を実装します。

1.データの準備

デザイナーの左上[ファイル]-[一般帳票新規作成]をクリックし、テンプレートの左下にビルトインデータセットds1 を新規作成します。以下の図をご参照ください：

2.グラフの挿入

セル範囲を結合します。上部ツールバーの[チャート]ボタンをクリックし、[面グラフ]-[積み上げ面グラフ]を挿入します。以下の図のように：

3.データのバインド

積み上げ面グラフを選択し、以下の図のようにグラフにデータをバインドします。

4.グラフ条件属性の設定

1）使用条件

条件属性の[不透明度]を設定するには、まず[グラフ]-[スタイル]-[系列]内の[段階変化スタイル]を無効にする必要があります。有効になっている場合、不透明度の設定は反映されません。

2）設定手順

グラフの[特殊効果] - [条件表示]で条件属性を追加し、以下のように設定します：

系列番号が「1」の場合、塗りつぶしの不透明度を「0」に設定します。

5.グラフスタイルの設定

1）グラフで[スタイル]-[ラベル]で[ラベル]をチェックし、返される内容をカスタマイズして、「差値」系列のラベルに「差値 + 最低値」の合計を表示させます。

入力するJavaScriptコードは次の通りです：

function(){ 
 if(this.seriesName=="差値"){
  return (this.points[0].value+this.points[1].value).toFixed(1); //差値系列の値に最低系列の値を加算して返し、小数点以下1桁を保持します
  };
  return this.value; //最低系列の値をそのまま返します
}

2）グラフの[スタイル]-[ヒント]で[ヒントを表示]を選択し、内容をカスタマイズします。以下のJavaScriptコードを入力します：

function(){    
  var value="<font color='white'>"+this.category+"<br>最低値："+this.points[0].value+"<br>最高値："+(this.points[0].value+this.points[1].value).toFixed(1)+"</font>";
  return value;
}

3）グラフの[スタイル]-[ヒント]で[データヒントを表示]を選択します。これにより、すべての系列のヒントが直線で接続されて一緒に表示されます。

5.効果プレビュー

5.1PC端末

帳票を保存し、[改ページプレビュー] をクリックすると、PC端末での効果は以下の図のように：

5.2モバイル端末

App端末 と HTML5 端末両方ともサポートされています。効果は以下の図のように：

注意：モバイル端末ではラベルが正常に表示されますが、ヒントには最高値ではなく差分値が表示されます。

テンプレートをダウンロードするにはこちらをクリックしてください：

範囲面グラフ.cpt