チャートをズームする

  • 作成者:ayuan0625
  • 編集回数:41次
  • 最終更新:FRInternational 于 2022-01-10
  • 一.概要

    一部の帳票では、展示するアイテムの種類が多いため、データはグラフに混雑しており、見にくくて対照しやすくないので、以下のような設置が必要となります。

    • X軸のアイテムが多すぎる場合は、スクロールバーを設定します。

    • 一部のグラフ効果はドラッグして拡大しなければ正常に展示できないので、グラフにズーム機能を追加します。

    • グラフの分類が多いので、横スクロールして表示します。

    • 柱は多く、見にくいので、柱の間隔を一致にして、横スクロールバーで展示する必要があります。

    そのため、チャートズームが必要になるのです。次に、グラフズームの設定方法と効果を詳しく紹介します。

    二.機能の紹介

    注:「ズームウィジェット有効」をチェックしない場合はジェスチャーで、チェックした場合はズームウィジェットでズームすることになります。両者は同時に利用できません。

    1.ジェスチャーズーム

    1.機能設定

    チャートプロパティパネルの特殊効果-インタラクション-チャートズームをクリックします。デフォルトではスケールコントローラ有効がチェックされていません。この場合はズームジェスチャーが使えます。

    設定可能なズーム方向は、X軸、Y軸、XY軸、なしです。デフォルトはXY軸で、「なし」を選択する場合はズームできません。

    注意事項:ズームジェスチャーのみがズーム方向を設定できます。

    01.png

    2.ズーム効果

    拡大:グラフエリアでマウスでエリアを選択して拡大できます。

    縮小:選択した領域をできるだけX軸の値を含むように外側にドラッグすると、元のページが縮小されます。

    復元:プレビューページの右上にある更新ボタンをクリックすると、元の状態に戻ります。

    03.GIF

    2.ウィジェットズーム

    「ズームウィジェット有効」を有効にすると、ズームウィジェットが設定できます。ウィジェットズームには、スケール軸とスクロール軸の2種類のウィジェットが含まれます。

    04.png

    2.1.スケール軸

    1.機能設定

    ウィジェット境界:調整可能な場合、ウィジェットの長さは伸縮可能で、調整できない場合は、設定された初期境界に基づいています。

    初期境界:グラフの初期の左右の境界を設定します。

    注1:縦棒グラフがオブジェクト名に分類される場合、左右の境界にも数字を記入してウィジェットの初期サイズを限定することができます。

    注2:単一分類チャートと複数分類チャートの境界の書き方が異なり、本文の例2と例3で詳しく紹介します。

    2.ズーム効果

    ズーム軸を移動して表示領域を選択し、ズーム軸の境界を伸縮して領域を拡大したり、縮小したりします。

    05.GIF

    2.2.スクロール軸

    1.機能設定

    ·        グラフの座標軸が「分類座標軸」の場合、初期分類数を設定でき、デフォルトは8個の分類です。

    ·        グラフの座標軸が「時間/数値座標軸」の場合、スケールを設定できます。デフォルトは30%です。

    06.png

    2.ズーム効果

    スクロール軸を移動して表示領域を選択します。

    07.GIF

    注:ズームウィジェットが設定されると、それをドラッグする以外に、描画エリア内でドラッグしても移動されます。描画エリア内のドラッグ方向はウィジェットとは逆で、左にスライドするとウィジェットに対応するチャート領域が右にスライドします。

    三.例1:ジェスチャーズーム

    1.チャートの挿入

    一般帳票を新規作成し、一定範囲のセルを結合します。チャート挿入のショートカットボタンをクリックして、棒チャートを挿入します。

    2.データの設定

    新しいデータセットds1、SQL文は SELECT * from S注文 order by 注文日 limit 25です。

    50.png

    3.データのバインド

    次の図に示すように、棒グラフを選択してグラフデータをバインドします。

    51.png

    4.ズームジェスチャーの設定

    A1セルを選択し、右側のプロパティパネルでセル要素-特殊効果-インタラクションプロパティ-チャートズーム」を選択し、ズームウィジェット有効をオフにし、ズーム方向でXY軸を選択します。

    52.png

    5.効果プレビュー

    帳票を保存し、「改ページプレビュー」をクリックします。効果は2.1節のズーム効果に示されているようです。

    四.例2:ズームウィジェット

    ここでは、例1のテンプレートに基づいて修正すれば完成できます。

    1.ズームウィジェットの設定

    グラフ属性パネルで特殊効果-インタラクション属性-チャートズームを選択します。ズームウィジェット有効をチェックし、ウィジェットタイプでズーム軸を選択し、ウィジェット境界で調整可能を選択し、初期左右境界(必須項目ではない)を設定し、初期左境界:="2010-02-02 00:00:00"、初期右境界:="2010-06-10 00:00:00"

    下図の通りです。

    10.png

    :この例は単一分類縦棒グラフなので、書き方は式であるため、等号で始まります。複数分類グラフは、以下の例3を参照してください。

    2.注意事項

    左右の境界の内容は「分類名」がデータセットにある文字列の内容の書き方と一致していなければ、有効になりません。たとえば、次の図に示すように、分類名は「注文日」です

    3.効果プレビュー

    帳票を保存し、改ページプレビューをクリックします。効果は2.1節のズーム効果に示されているようです。

    五.例3:多分類チャートのウィジェットズーム

    グラフに複数の分類がある場合、ウィジェットのスケーリングを設定する左右の境界の書き方と単一の分類が異なるので、多分類グラフのズームウィジェットを設定する方法を紹介します。

    1.テンプレートの準備

    チャートを新規作成します。下図の通りです。

    12.png

    2.ウィジェットズームの設定

    グラフを選択し、属性パネルで特殊効果-インタラクション属性-チャートズームを選択し、ズームウィジェットを有効にします。ウィジェットタイプはズーム軸を選択し、ウィジェット境界は調整可能を選択し、初期左境界を設定します(必須項目ではありません):["関東", "楊", "デザート"]、初期右境界を設定しません。下図の通りです。

    1:ここでは、単一分類グラフの書き方とは異なり、数式を使わずに編集ボックスに直接入力するか、数式定義に入力した後、一番前の=を削除します。

    2:多分類境界値設定ルール:["親分類", "サブ分類"]に分けられ、境界値は分類値に基づいて記入されます。例えば、このテンプレートの分類には、地域-名前-製品の3層があるので、順番に["関東", "", "デザート"]と記入します。

    13.png

    3.効果プレビュー

    多分類グラフの効果は下図のように、グラフの一番左は関東--デザートから始まったのです。

    14.png

     


    Attachment List


    Theme: FineReport チャート
    既に最初
    既に最後
    • Helpful
    • Not helpful
    • Only read