FineVisクエリパネル

応用シーン：「FineVis データ可視化」プラグインをインストールしたユーザは、本文を参考に FineVis の関連機能を理解できます。

1.バージョン

2.応用シーン

FineVis テンプレートにおいて、パラメータウィジェットでデータをクエリする場合、ウィジェットをキャンバスに直接追加して使用する必要があります。

ただし、ユーザによっては、特にモバイル端末でテンプレートを確認する場合など、ウィジェットのクエリパネルをテンプレート内に直接表示するのではなく、展開/折りたたみ可能な形式での利用を希望するケースもあります。

V2.3.0 以降のバージョンでは、[クエリパネルを有効にする]によるこのような効果を実現できます。効果は以下の図のように：

注意：クエリパネルでのウィジェットは、キャンバスでのウィジェットの影響を受けません。たとえ同じパラメータにバインドされていても、クエリパネルでのウィジェットには連動効果がありません。

1.機能の入り口

クエリパネルの設定はすべてのページで共通に有効されます。設定の入り口はキャンバス下部の改ページエリアにあります。[クエリパネルの設定]ボタンをクリックすると、設定ウィンドウがポップアップされます。

設定ウィンドウで[クエリパネルを有効にする]にチェックを入れると、ウィジェットの追加やクエリパネルのスタイル設定が可能になります。以下の図のように：

注意：クエリパネル内のウィジェットは、JS インターフェースによる取得に対応していません。

クエリパネルを有効にしてウィジェットを追加すると、テンプレートをプレビュー時にページの左下にクエリボタンが表示されます。テンプレートに複数のページがある場合、ページ切替ボタンの左側に表示されます。

注意1：クエリパネルを有効にしていても、ウィジェットを追加していない場合、プレビュー時にはクエリボタンが表示されません。

注意2：クエリパネルを有効にしていても、特定のページにウィジェットが表示されていない場合、プレビュー時にはクエリボタンは表示されません。

2.内容

[ウィジェットを追加]をクリックし、プルダウンオプションからウィジェットタイプを選択してリストに追加します。追加後、右側でウィジェット内容の設定が可能です。

注意：クエリパネル内のウィジェットでは、文字スタイルの設定がサポートされていません。

リストでウィジェットの順序をドラッグして調整することができます。リスト内の順序が、テンプレートをプレビュー時のウィジェットの表示順序となります。

V4.1.0 バージョンでは[ページ表示]が新規追加され、ウィジェットの表示/非表示を異なるページごとに設定できるようになります。デフォルトですべてのページが選択されています。以下の図のように：

注意：[ページ表示]はウィジェットのページでの可視性のみを制御し、パラメータのスコープに影響しません。

3.スタイル

注意：クエリパネルおよびウィジェットスタイルは、FineVisテンプレートスタイル の影響を受けます。

3.1自動クエリを有効にする

スタイル設定では、[自動クエリを有効にする]かどうかを設定できます。

この設定項目は PC端末とモバイル端末 で共通され、効果も同じです。

　·　チェックを入れると、テンプレートの初回プレビュー時または更新時に、クエリパネルはデフォルトで折りたたまれた状態となり、ウィジェットのクエリが自動トリガーされてテンプレートでの全ての内容が表示されます。

　·　チェックを外すと、テンプレートの初回プレビューまたは更新時に、クエリパネルはデフォルトで展開された状態となります。テンプレートの内容は即時表示されず、[クエリパネル]の[検索]ボタンをクリック後に表示されます。

3.2モバイル端末のスタイルテンプレート

テンプレートを[モバイル端末]モードに切り替えると、クエリパネルのスタイルで[テンプレート]（[デフォルトスタイル]／[上部スタイル]を含む）の選択が可能です。

1.テンプレートの準備

1）デザイナの左上にある[ファイル]-[可視化カンバンを新規作成]をクリックし、空白の可視化カンバンを作成します。

2）データベースクエリ ds1 を新規作成し、SQLクエリ文「SELECT * FROM 販売量 where 地域='${area}'」を入力します。

変数 area の既定値を「関東」に設定します。これにより、デフォルトで関東地域の販売量データを取得します。

2.縦棒グラフの追加

コンポーネントエリアにある[チャート]-[縦棒グラフ]をクリックし、縦棒グラフコンポーネントをページに追加し、縦棒グラフに area パラメータを含むデータセットのデータをバインドします。以下の図のように：

3.ページのコピー

キャンバスの改ページエリアでページ1をコピーし、コピーしたページを2つ貼り付けます。以下の図のように：

4.クエリパネルの設定

1）キャンバス下部にある[クエリパネルの設定]をクリックし、[クエリパネルを有効にする]にチェックを入れます。[ウィジェットを追加]をクリックし、プルダウンボックスウィジェットを追加します。

2）ウィジェット名称を「地域」に設定し、パラメータ area をバインドします。

3）[オプション値のソース]を[データベース表]に設定し、[FRDemo]内の「販売量」表から「地域」フィールドを選択し、[確定]をクリックします。

4）[既定値]で「関東」を入力します

5）[ページ表示]でページ1を選択し、その他のページのチェックを外し、[確定]をクリックします。

5.モバイル端末のクエリパネルスタイルの設定

1）[モバイル端末]モードに切り替え、[クエリパネルの設定]-[スタイル]をクリックし、[テンプレート]から[上部スタイル]を選択します。

2）[ウィジェット値編集後の自動クエリー]のチェックを外し、[確定]をクリックします。

6.効果のプレビュー

6.1PC端末

右上の[保存]をクリックした後、[プレビュー]をクリックします。テンプレートの左下に表示されるフィルタボタンをクリックすると、クエリパネルが展開されます。他のページに切り替える場合、フィルタボタンは表示されません。以下の図のように：

6.2モバイル端末

プレビュー方法については「FineVisモバイル端末プレビュー」を参照してください。効果は以下の図のように：

テンプレートをダウンロードするにはこちらをクリックしてください：FineVisクエリパネルの例.fvs