この章では、[WebSite データダッシュボード] を例として、DataV 空白テンプレートを使用して可視化アプリケーションプロジェクトを開発する方法を示します。
背景情報
この例では [静的データ] を使用しているため、コンポーネントのデータ構成領域に準備したデータを直接貼り付けることができます。 データソースが [CSV ファイル]、[データベース]、またはその他のタイプの場合は、最初に データソースを追加 する必要があります。
[API] データソースを使用する必要がある場合は、データ構成バーに API アドレスを直接入力できます。 構成時に [サーバープロキシリクエスト] などの操作を有効にする必要がある場合は、クロスドメインデータの構成 をご参照ください。
効果の表示
この記事で提供されている構成を完了すると、次の効果を持つデータダッシュボードが生成されます。
可視化アプリケーションには多くの構成が含まれており、構成が異なるとスタイルも異なります。 この例は、関連する機能と操作フローを理解するためにのみ使用されます。 実際の効果は操作によって異なります。
コンポーネント情報
次の図は、例で使用されているコンポーネントチェックリストを示しています。各コンポーネントの名前と対応する数量が含まれています。
手順
空白のキャンバスに可視化アプリケーションを構築し、以下の操作を通じて DataV-Board の関連機能をすばやく体験できます。
ステップ 1: 可視化アプリケーションを作成する
DataV コンソール にログインします。
[プロジェクト] ページで、[PC 作成] をクリックします。 ページで、[空白のキャンバス] を選択し、[プロジェクトの作成] をクリックします。
[プロジェクトの作成] ダイアログボックスで、可視化アプリケーション名を入力し、プロジェクトグループ を選択します。 グループが作成されていない場合は、[グループ化されていない] を選択できます。
アプリケーションが正常に作成されると、アプリケーションエディターページにリダイレクトされます。 必要に応じて、データソースに接続し、キャンバス情報を構成できます。
説明デフォルトのキャンバスサイズは 1920 × 1080 です。 キャンバスエディターの右側にある [ページ設定] 領域で必要に応じて調整できます。
ステップ 2: コンポーネントを追加および構成する
複数選択操作: Windows では、Ctrl キー (Mac では Command キー) を押しながらコンポーネントをクリックして、複数のコンポーネントを選択します。
コンポーネントの移動: コンポーネントをドラッグするか、構成パネルで座標を変更することで、キャンバス内のコンポーネントの位置を調整できます。
レイヤー調整: 左側のレイヤーパネルで、コンポーネントを上下にドラッグしてレイヤーレベルを変更できます。 レイヤーを移動 するときに、2 つのコンポーネントが重なっている場合、前面にあるコンポーネントが背面にあるコンポーネントを覆います。
ビジネス指標のトレンド
キャンバスの左側にある [すべてのアセット] パネルで、 をクリックして、コンポーネントをキャンバスに追加します。
コンポーネントをクリックし、可視化アプリケーションの右側にある [構成] パネルで、下部パネルの [タイトル]、[アイコン]、および [値] を効果図に従って構成します。
上記の手順を繰り返して、すべてのビジネス指標トレンドコンポーネントの構成を完了します。
全般タイトル
キャンバスの左側にある [すべての資産] パネルで、 をクリックして、全般タイトルコンポーネントをキャンバスに追加します。
コンポーネントをクリックし、可視化アプリケーションの右側にある [構成] パネルで、[共通タイトル] のスタイルを設定します。
[構成] パネルの [共通タイトル] タブで、タイトルの名前を変更します。
上記の操作を繰り返して、他の [全般タイトル] コンポーネントを追加し続けます。
ティッカーボード
キャンバスの左側にある [すべてのアセット] パネルで、 コンポーネントをクリックします。
コンポーネントをクリックし、可視化 アプリケーションの右側にある [構成] パネルで、[ティッカーボード] のスタイルを設定します。
[ティッカーボード] の [データパネル] で、値を、表示するデータに変更します。
上記の操作を繰り返して、他の [ティッカーボード] コンポーネントを追加し続けます。
タイマー
キャンバスの左側にある [すべてのアセット] パネルで、 コンポーネントをクリックします。
[タイマー] のスタイルを設定し、[アイコンスタイル]、[タイマー]、およびその他の設定を変更します。
カスタム バックグラウンド ブロック
キャンバスの左側にある [すべてのアセット] パネルで、 コンポーネントをクリックします。
[カスタマイズされた背景] のスタイルを設定し、[カスタム スタイル] と [カスタム背景スタイル] を変更します。
ダッシュボード
キャンバスの左側にある [すべてのアセット] パネルで、 コンポーネントをクリックします。
[ダッシュボード] のスタイルを設定し、[シリーズ] の下の [ダッシュボード ポインター] などのフィールドを変更します。
必要に応じて、データ項目 JSON ファイルを変更します。
注釈付きバブル棒グラフ
キャンバスの左側にある [すべてのアセット] パネルで、 コンポーネントをクリックします。
[ラベルバブル棒グラフ] のスタイルを設定し、[シリーズ] の下の [要素スタイル] を変更し、データソースとその他の構成を変更します。
エリア チャート
キャンバスの左側にある [すべての資産] パネルで、 コンポーネントをクリックします。
[エリア チャート] のスタイルを設定し、[線のスタイル] と [データ ソースの設定] を変更します。
上記の手順を繰り返して、他の [エリア チャート] コンポーネントを追加し続けます。
単一イメージ
キャンバスの左側にある [すべてのアセット] パネルで、 コンポーネントをクリックします。
必要に応じて、単一イメージの [背景イメージ] を変更します。
上記の操作を繰り返して、他の [単一イメージ] コンポーネントを追加し続けます。
ステップ 3：可視化アプリケーションのプレビューと公開
コンポーネントのスタイルとデータソースを設定した後、可視化アプリケーションをプレビューおよび公開して、ダッシュボードのオンライン再生とデモを実現できます。このステップでは、可視化アプリケーションをプレビューおよび公開する方法について説明します。
キャンバスエディターの右上隅にある
アイコンをクリックして新しいページにジャンプし、可視化アプリケーションをプレビューします。プレビューが成功したら、次の手順に従って可視化アプリケーションを公開できます。
キャンバスエディターの右上隅にある
アイコンをクリックし、表示されるダイアログボックスで [プロジェクトの公開] をクリックして公開ページを開きます。公開ページで、[共有 URL]
の右側にあるアイコンをクリックしてリンクをコピーします。説明公開ページでは、必要に応じて 公開情報とスナップショット管理 を実行できます。
URL をコピーしてブラウザのアドレスバーに貼り付けて、公開されたプロジェクトを表示します。
参照資料
詳細については、「テンプレートから可視化アプリケーションを作成する」をご参照ください。
コンポーネント構成や設計図アプリケーションなどの構成操作の詳細については、「コンポーネント構成」、「設計図のケース」をご参照ください。