DataV:単一の画像

単一の画像とは

ウィジェットの一種です。クリックすると指定の操作が実行されます。また、可視化アプリケーションやその他のウィジェットにカスタムの背景画像を追加して、操作をよりインテリジェントに、可視化アプリケーションをより美しくすることができます。

設定パネル

• 設定を検索:

  直接に設定項目名を検索できます。あいまい検索も可能です。

  詳細については、「設定の検索」をご参照ください。

• サイズ:

  ボタンのサイズ。単位：ピクセル。

  をクリックすると、幅と高さの比例を維持したまま調整できます。もう一度クリックすると、比例の維持をキャンセルできます。

• 位置: ボタンの位置。X 座標と Y 座標から構成されます。単位：ピクセル。

  X 座標は、ボタンの左端とキャンバスの左端の間のピクセル距離を示します。

  Y 座標は、ボタンの上端とキャンバスの上端の間のピクセル距離を示します。

• 回転角度: ボタンの中心点を回転中心とします。単位：度 (°)。

  調整方法：

  • スピンボックスに直接度数を入力するか、+ または - をクリックします。

  • の黒い点をドラッグします。

  • をクリックして、ボタンを左右反転させます。

  • をクリックして、ボタンを上下反転させます。

• 不透明度: 有効な値: 0~1。デフォルト値: 1。

  0 : 非表示。1 : 完全表示。

• 画像タイプ: ビットマップまたはベクターに設定できます。

• 背景画像: 背景画像をカスタマイズできます。リモートサーバー上の画像を使用する必要がある場合は、入力ボックスに画像の URL を入力します。下にある画像ボックス内のプレビューをクリックして、画像の大きなスタイルをプレビューできます。また、変更をクリックして、画像のデザインアセットを変更できます。

  説明

  現在、ビットマップは、PNG、JPG、GIF、JPEG などの形式をサポートしています。ベクターは、SVG 形式のみをサポートしています。

• 塗りつぶし色: 画像タイプをベクターに設定した場合は、画像の塗りつぶしの色を設定できます。

• 画像の繰り返し: 繰り返しない、横方向と縦方向に繰り返し、横方向に繰り返し、縦方向に繰り返しを選択できます。

• 角が丸い: 角の半径。有効な値： 0～360。

  0 の場合は長方形に、360 の場合は円形になります。

• ハイパーリンク: 設定完了後、プレビューページまたは公開ページで画像ウィジェットをクリックすると、指定されたリンクに移動されます。

  パラメータ	説明
  ハイパーリンク	ハイパーリンクの URL。こちらで URL を指定するか、データタブの url パラメータで指定することもできます。 両方で指定した場合、データタブの URL が優先されます。
  新しいウィンドウで開く	オンにすると、新しいタブでリンクが開かれます。 オフにすると、利用中のタブでリンクが開かれます。

• 手形カーソル: スイッチをオンにすると、プレビューページまたは公開ページでポインタを画像ウィジェットの上に移動すると、カーソルが手の形に表示されます。スイッチをオフにすると、カーソルはポインタスタイルのままになります。

データパネル

インタラクションパネル

ブループリントエディタでのインタラクション設定

1. キャンバスエディタで、画像を右クリックし、ブループリントエディターにエクスポートを選択します。

2. ページの左上隅にある アイコンをクリックします。

3. ブループリントエディタで、追加されたノードペインで単一の画像をクリックします。キャンバスでは、次の図に示すように、画像のパラメータを表示できます。

   • イベント

     イベント	説明
     API リクエストの完了時	データリクエストが応答され、応答結果がフィルタによって処理された後、処理済みの JSON データと一緒にスローされるイベントです。 データ例の参照：データパネル > データ応答結果セクション
     API リクエストの失敗時	ネットワーク問題またはインターフェイスエラーなどでデータリクエストが失敗し、エラー情報がフィルタによって処理された後、処理済み JSON データと一緒にスローされるイベントです。 データ例の参照：データパネル > データ応答結果セクション
     画像をクリックすると	画像をクリックすると、対応するデータ項目と一緒にスローされるイベントです。
     マウスが内側に移動した時	マウスが画像上に移動された時、対応するデータ項目と一緒にスローされるイベントです。
     マウスが外側に移動した時	マウスが画像外に移動された時、対応するデータ項目と一緒にスローされるイベントです。

   • アクション

     アクション	説明
     データインターフェースのリクエスト	サーバーデータを再度リクエストします。アップストリームのコンバータまたはレイヤーノードから送信されたデータがパラメータとして使用されます。 例えば、API データソースが https://api.test で、データインターフェイスのリクエストに転送されたデータが { id: '1'} の場合、最終的なリクエストインターフェイスは https://api.test?id=1 になります。
     データインターフェースのインポート	データを画像のデータ形式に変換した後にインポートします。画像はデータを改めて表示します。サーバデータの再リクエストは不要です。 データ例の参照：データパネル > データ応答結果セクション
     リフレッシュ	パラメーターなしで動態画像をリフレッシュします。
     ウィジェット設定の更新	画像のスタイルを更新します。 スタイルデータの取得と編集： 1. 設定パネル (キャンバスエディター) の下でクリップボードに設定をコ... をクリックします。 2. ブループリントエディターで順次データ処理ノードをクリックします。 3. 他の設定 > 処理方法で、「data」をコピーしたスタイルデータに置き換え、需要に応じてパラメータの値を変更します。
     表示	画像を表示します。データ例： return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     非表示	画像を非表示にします。データ例： return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     表示/非表示	画像の表示と非表示を切り替えます。データ例： return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     移動	画像を指定された位置に移動します。データ例： return { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } };