万華鏡チャート

  • 作成者:ayuan0625
  • 編集回数:6次
  • 最終更新:ayuan0625 于 2021-09-22
  • 一. 概要

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

    FineReportの豊富なチャート機能は、さまざまな視覚的表示効果を実現できますが、デザインツールやプログラミング言語を必要とする複雑で高度なグラフィックスに直面した場合、チャートの組み合わせにより同様の効果を実現することもできます。
    本文では、下図のようなドーナツチャートをチャートの組み合わせで実現します。

    20.gif

    2.機能の説明

    • 外側の円には系列名が表示され、外側の円はマウスでドラッグすることで回転できます。

    • 内側の円に系列値が表示され、マウスを合わせると系列名と系列値が表示されます。

    3.実現方法

    • 外側の円は、セル要素の形で挿入された円グラフで実現し、リング効果は、内径を変更することによって実現されます。

    • 内側の円は、フローティング要素の形で挿入されたレーダーチャートで実現し、内側の円効果は、レーダーチャートをリング内に置くことによって実現されます。

    二. 事例

    この例では、ドーナツチャートで候補者への投票数を集計します。

    1.データの準備

    一般のレポートを作成し、ビルトインデータセット「得点集計」を作成します(下図)。

    01.png

    2.レポートのデザイン

    2.1.外側リングのデザイン

    1.セルA1〜I1を結合し、最初の行にタイトル:得点集計を入力します。セルA2~I28を結合して、円グラフを挿入します(下図)。

    02.png

    2.下図に示すように円グラフにデータを関連づけます。

    03.png

    3.円グラフのスタイルタイトルを選択し、タイトル表示のチェックを外します。

    04.png

    4.円グラフのスタイルパネルで凡例表示を無効にします。

    05.png

    5.円グラフスタイルの系列パネルで、内径を80%に変更して、回転可能有効にします。

    06.png

    6.円グラフスタイルのヒントパネルで、ヒントを使うのチェックを外します。

    07.png

    7.円グラフスタイルのラベルパネルで、ラベルにチェックを入れ、値ラベルにリッチテキストを選択し、表示対象となる系列名と得点を選択します(下図)。

    08.png

    8.円グラフの特殊効果パネルで、インタラクティブ属性を選択し、ツールバーのすべての内容にチェックを外して、ツールバーを非表示にします。

    09.png

    2.2.内側のデザイン

    1.右側のプロパティパネルでフローティング要素-要素の追加-グラフの挿入をクリックして、積み上げ棒レーダーチャートを挿入します。

    10.png

    2.レーダーチャートを右クリックし、スタイルをクリックして、背景-を選択し、レーダーチャートの背景色を透明に設定します。

    11.png

    3.下図に示すようにレーダーチャートにデータを関連づけます。

    12.png

    4.円グラフのスタイルを設定すると同様に[タイトル表示]、[凡例表示]のチェックを外します。

    13.png 14.png

    5.レーダーチャートスタイルに座標軸-極軸角度を選択し、軸ラベルに[非表示]を選択します。

    15.png

    6.レーダーチャートスタイルに座標軸-極軸直径を、軸ラベルに隠すを、値定義に一括計算を選択します。カスタム主要目盛り単位にチェックを入れて、数値を5に設定してください。

    16.png

    7.レーダーチャートのスタイルにヒントを選択し、ヒントを使う、テキストの系列名にチェックを入れてください。

    17.png

    8.レーダーチャートのプロパティパネルで、特殊効果-インタラクション属性を選択し、ツールバーのすべての内容にチェックを外して、ツールバーを非表示にします。

    18.png

    9.レーダーチャートを右クリックし、最前面に移動をクリックして、レーダーチャートを外側円の中央にドラッグします(下図)。

    19.png

    3.プレビュー

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

    注1:フローティングチャートがあるため、モバイル端末とダッシュボードのプレビューはできませんが、ダッシュボードに2つのチャートブロックを重ねることができます。

    注2:レーダーチャートと円グラフの棒形状が一致しないため、レポートのプレビュー時に棒が揃わない場合があります。下部の外側円を手動で回転させて、内側円の棒を揃えることができます。

    20.gif


    三. 注意事項

    1.外側円ヒントがフローティングしない

    レーダーチャートは正方形モデルで範囲が広いため、外側円のリング内にフロートしていると、円グラフのヒントの一部が覆われます。

    21.gif


    Attachment List


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