DataV:キーテーブル

チャートスタイル

キー値テーブルは、テーブルウィジェットの一種です。 キーと値の形式でテーブルの内容をカスタマイズできます。 視覚化アプリケーションのテーブルにデータを明確に表示できます。 表示できるデータは2列のみで、新しい列を追加することはできません。

設定パネル

• [設定の検索]: キャンバスエディターの右側のパネルで、[設定] タブをクリックし、右上隅の [設定の検索] をクリックします。 検索ボックスに必要な設定項目を入力し、検索アイコンをクリックして設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「」をご参照ください。

• Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックすると、ウィジェットの幅と高さを比例調整できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。

• 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。

• 回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。

  • 回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。

  • アイコンの黒い点をドラッグします。

  • アイコンをクリックして、ウィジェットを水平に反転します。

  • アイコンをクリックして、ウィジェットを垂直に反転します。

• 不透明度: ウィジェットの不透明度。 有効な値: 0と1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1

• テーブル

  パラメーター	説明
  アダプティブ	スイッチをオンにすると、テーブルはウィジェットサイズに適応し、ウィジェットを適切に配布します。 スイッチをオフにすると、テーブルに元のサイズが表示されます。
  ボーダーライン	テーブルの外側の境界線のスタイル。 線の太さ: 境界線の太さ。 線の色: 境界線の色。 詳細については、「カラーピッカーの説明」をご参照ください。
  テキストスタイル	表内のすべてのテキストのフォントファミリ。 デフォルト値: Microsoft Black

• セル: セル間の間隔。

  パラメーター	説明
  左と右の間隔	セル内のテキストとセルの左右の境界との間の距離。 有効値：0 〜 50 です。 単位: ピクセル
  上部と下部の間隔	セル内のテキストの、セルの上下の境界からの距離。 adaptive設定項目が有効で、テーブルがオーバーフローしない場合、この設定項目はテーブルヘッダーに対してのみ有効になります。 他の行の高さは適応的です。 有効値：0 〜 50 です。 単位: ピクセル。

• ヘッダー

  • 最初の行ヘッダー: スイッチをオンにすると、テーブルの最初の行がヘッダーとして使用されます。 ヘッダーのテキストスタイルを設定することもできます。 ヘッダーを設定する必要がない場合は、この設定項目を無効にして、データのlabelフィールドとvalueフィールドを削除できます。 スイッチをオフにすると、テーブルにはヘッダースタイルがありません。

  • テキストスタイル: 最初の行ヘッダーの設定項目がオンになっている場合にのみ表示されます。

    パラメーター	説明
    フォントの色。	ヘッダーテキストの色。
    フォントサイズ	ヘッダーテキストのサイズ。 有効値: 0~100。
    フォントの重み	ヘッダーテキストのフォントの太さ。

  • 背景色: ヘッダーの背景色。 このパラメーターは、最初のヘッダーの設定項目がオンになっている場合にのみ表示されます。

• 列

  • 幅 %: 最初の列のテーブルの幅の割合。

  • ラインセパレータ

    パラメーター	説明
    ラインの太さ	2つの列の間のラインセパレータの厚さ。
    ラインカラー	2つの列の間の行セパレータの色。

  • 最初の列

    パラメーター	説明
    テキストスタイル	最初の列のテキストの色、フォントサイズ、およびフォントの太さ。
    背景色	最初の列の背景色。
    テキストの配置	最初の列のテキストの配置。 左揃え、右揃え、または中央揃えを選択できます。

• 2番目の列: 2番目の列のスタイルを設定します。 詳細については、「最初の列」をご参照ください。

• ライン

  • ラインセパレータ

    パラメーター	説明
    ラインの太さ	異なる行間のラインセパレータの太さ。
    ラインカラー	異なる行間の線セパレータの色。

  • パリティ行を区別するかどうか

    • スイッチをオンにすると、システムは自動的に奇数行と偶数行を区別し、奇数行と偶数行の背景色を設定できます。

      パラメーター	説明
      奇数列の背景色	テーブル内の奇数行の背景色。
      偶数行の背景色	テーブル内の偶数行の背景色。

    • スイッチをオフにすると、システムは奇数行と偶数行を区別しません。 すべての行が列の背景色として表示されます。

データパネル

設定フィールドの説明

テーブルの主なデータ形式は、{"最初の列のキー":"2番目の列の値",...} です。 他のデータは、実際のデータ内容の順序で、表の対応する行と列にカスタマイズして配布することができます。

相互作用パネル

このウィジェットはインタラクションイベントをサポートしていません。

Blueprint Editorでのインタラクションの設定

1. キャンバスエディターで、レイヤーパネルでウィジェットを右クリックし、[ブループリントエディターに追加] を選択します。

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

3. Blueprint Editorで、[追加ノード] ペインで [キーテーブル] コンポーネントをクリックします。 次の図に示すように、キャンバス上でKey-Valueテーブルコンポーネントのパラメーターを表示できます。

   • イベント

     イベント	説明
     データインターフェイス要求が完了したとき	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     データインターフェイス要求が失敗した場合	データインターフェイス要求が失敗したときに返され (要求はネットワークの問題またはインターフェイスのエラーが原因である可能性があります) 、フィルターによって処理されるイベント。 イベントは、処理されたJSONデータもスローします。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。

   • ポリシーアクション

     ポリシーアクション	説明
     要求データインタフェース	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttps:// api.testで、リクエストデータインターフェイスに転送されるデータが { id: '1'} の場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。
     データのインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。
     表示	ウィジェットを表示します。 参照データの例を次に示します。 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" } };