DataV:台形列チャートウィジェット

チャートスタイル

はしご棒グラフは、棒グラフの一種です。 カテゴリ間およびカテゴリ内のデータの違いを明確かつインテリジェントに表示できます。 しかし、視覚化アプリケーションでは大きなスペースを占有します。 カスタムy軸間隔、マルチシリーズデータ構成、およびデータカテゴリに基づく自動グループ化をサポートします。

設定パネル

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

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

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

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

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

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

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

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

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

• チャート

  • マージン: 縦棒グラフ領域とウィジェットの4つの境界の間の距離。 デフォルト値: px。

  • データ制限: ロードする入力データレコードの最大数を指定できます。 システムは、レイアウト、描画、およびコンピューティング用の入力データレコードの最大数を読み込みます。 これにより、視覚的なアプリケーションが保証されます。

  • 列: 縦棒グラフの各列のスタイル。

    Slope: 台形ヒストグラムの足の傾き範囲。

  • 値ラベル: 各列の値ラベルのスタイル。 アイコンをクリックすると、値のラベルを表示または非表示にできます。

    パラメーター	説明
    テキスト	値ラベルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。
    位置	値ラベルテキストの位置。 有効な値: Top、Middle、Bottom。
    空のデータ	スイッチをオンにしても、値タグデータはウィジェット列に表示されます。 スイッチをオフにすると、値タグデータはウィジェット列に表示されません。

  • 凡例: 縦棒グラフの凡例スタイル。 アイコンをクリックして、凡例を表示または非表示にできます。

    パラメーター	説明
    テキスト	凡例テキストのフォントスタイル、テキストの太さ、フォントサイズ、色。
    レイアウト	凡例間の位置関係。 パディング 水平パディング: 隣接する凡例の左右の距離。 この設定項目は、複数のシリーズがある場合にのみ有効です。 垂直パディング: 凡例とウィジェットおよび縦棒グラフの上下の境界との間の距離。 位置: ウィジェットの開始座標に対する凡例の位置。 有効な値: Top Left、Top Center、Top Right、Bottom Left、Bottom Center、Bottom Right。

• 座標軸: X軸またはY軸を選択できます。

  • X軸

    • 軸を表示: スイッチをオンにすると、ウィジェットのx軸スタイルが表示されます。 スイッチをオフにすると、ウィジェットのx軸スタイルは表示されません。

    • 左と右のマージン: x軸の左右の距離。 有効な値は 0～1 です。

    • 間隔: x軸の列間の距離。 値が大きいほど、列が細くなり、間隔が大きくなります。 値の範囲は0〜0.95です。

    • 軸ラベル: x軸ラベルの縦棒グラフスタイル。 アイコンをクリックすると、x軸ラベルを表示または非表示にできます。

      パラメーター	説明
      テキスト	x軸ラベルテキストのフォントスタイル、太さ、フォントサイズ、および色。
      ラベル表示	角度: x軸ラベルの角度。 有効な値: 水平、傾斜、および垂直。 数量: x軸ラベルの数。 軸単位: 軸ラベルの単位。

    • 軸線: 縦棒グラフのx軸のスタイル。 アイコンをクリックして、x軸を表示できます。

      色: x軸の色。

    • グリッド線: 縦棒グラフのx軸グリッド線のスタイル。 アイコンをクリックすると、x軸のグリッド線を表示または非表示にできます。

      色: x軸のグリッド線の色。

  • Y軸

    • 軸を表示: スイッチをオンにすると、ウィジェットのy軸スタイルが表示されます。 スイッチをオフにすると、ウィジェットのy軸スタイルは表示されません。

    • Range: y軸の最小値と最大値の範囲。

      パラメーター	説明
      最小値	y軸の最小値。 値をカスタマイズするか、値を選択できます。 自動: システムは、データの最大値、最小値、およびメトリックポイント数を自動的に計算します。 Data Min: データの最小値。
      最大値	y軸の最大値。 値をカスタマイズするか、値を選択できます。 自動: システムは、データの最大値、最小値、およびメトリックポイント数を自動的に計算します。 Data Max: データの最大値。

    • 軸ラベル: y軸ラベルの縦棒グラフスタイル。 アイコンをクリックすると、y軸ラベルを表示または非表示にできます。

      パラメーター	説明
      データフォーマット	y軸ラベル値の表示形式。 [デフォルト] 、11 (整数) 、11.1 (フロート) 、11.11 (フロート) 、11% 、11.1% 、または11.11% を選択できます。
      テキスト	y軸ラベルテキストのフォントスタイル、テキストの太さ、フォントサイズ、色。
      ラベル表示	y軸のラベルは数量と単位を示します。

    • 軸線: 縦棒グラフのy軸のスタイル。 アイコンをクリックして、y軸を表示できます。

      色: y軸の色。

    • グリッド線: 縦棒グラフのy軸グリッド線のスタイル。 アイコンをクリックすると、y軸グリッド線を表示または非表示にできます。

      色: y軸上のグリッド線の色。

• シリーズ

  データシリーズ: 右側のまたはアイコンをクリックして、データシリーズを追加または削除します。 またはアイコンをクリックして、複数のデータ系列の配置スタイルを設定します。 アイコンをクリックして、選択したデータ系列設定をコピーし、同じ設定のデータ系列を追加します。

  パラメーター	説明
  シリーズ名	カスタマイズ可能なデータ系列の名前。 このパラメーターが空の場合、コンポーネントデータのsフィールド値がシリーズ名として表示されます。 このパラメーターが空でない場合は、データが返される順序を確認する必要があります。
  カラー	このシリーズの下の色の縦棒グラフ。

• その他

  • Easing Animation: 棒グラフのアニメーション効果のスタイル。 アイコンをクリックすると、アニメーション効果を有効または無効にできます。

    パラメーター	説明
    アニメーション設定	イージング効果: アニメーションのイージング効果。 このシステムは、さまざまな共通の緩和効果を提供します。 各シリーズのアニメーション全シリーズの連続: スイッチをオンにすると、各シリーズの棒グラフがアニメーションを順番に再生します。スイッチをオフにすると、すべての列がアニメーションを一緒に再生します。
    入り口アニメーション	コンポーネントによってレンダリングされる最初のアニメーションの期間。 単位：ms。
    更新アニメーション	データ更新の期間: ウィジェットデータが更新されたときのアニメーションの期間。 単位：ms。 最新のステータスから更新: スイッチをオンにすると、ウィジェットデータが更新されたときの前の位置からアニメーションが開始されます。 スイッチをオフにすると、ウィジェットデータが更新されたときの初期位置からアニメーションが開始されます。

  • ヒント: プレビューページまたは公開ページで、ポインターを上に移動するか、縦棒グラフをクリックしたときに表示されるダイアログボックスのスタイル。 アイコンをクリックして、ダイアログボックスをオンまたはオフにします。

    パラメーター	説明
    フェード遅延	トリガー条件が満たされない場合、ダイアログボックスは消えます。 この設定項目は、ダイアログボックスが消えるまでの遅延時間をms単位で設定します。
    トリガーモード	トリガーアイテムの種類: トリガーするターゲットの種類を示します。 このフィールドはオプションで、ItemとAxisを含みます。 トリガーアクション: トリガーするアクションのダイアログボックス。 このパラメーターは、[Hover] および [Click] などのオプションです。
    テキストスタイル	ダイアログボックス内のテキストのスタイル (フォントスタイル、太さ、フォントサイズ、色など) 。 q
    背景ボックス	ダイアログボックスの背景ボックススタイル。 背景色: ダイアログボックスの背景色。 ディメンション: ダイアログボックスの幅と高さ。 単位: ピクセル。 アイコンをクリックして、カスタムダイアログボックスをオンまたはオフにします。 パディング: ダイアログボックスの内側の余白。 単位: ピクセル。 オフセット 水平オフセット: マウスの矢印に対するダイアログボックスの水平オフセット。 単位: ピクセル 垂直オフセット: マウスの矢印に対するダイアログボックスの垂直オフセット。 単位: ピクセル 国境 枠の幅: ダイアログボックスの枠の太さ。 単位: ピクセル。 枠の色: ダイアログボックスの枠の色。

データパネル

設定フィールドの説明

相互作用パネル

ウィジェット間のインタラクションを有効にするには、[有効化] チェックボックスをオンにします。 ラダー棒グラフの列をクリックすると、データ要求がトリガーされ、コールバック値がスローされ、さまざまな列のデータが動的に読み込まれます。 デフォルトでは、データ内のx、y、sの値が返されます。 コールバックIDを設定する方法の詳細については、「カードフリップウィジェットのコールバックIDを設定する方法」をご参照ください。

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

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

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

3. Blueprint Editorページで、[ノードのインポート] パネルの [台形列チャート] コンポーネントをクリックします。 キャンバス上の次の図のブループリントエディターのパラメーターを表示できます。

   • イベント

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

   • Action

     Action	説明
     要求データインタフェース	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースが台形ヒストグラムのhttps:// api.testとして設定され、Request data Interfaceアクションに渡されるデータが { id: '1'} の場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。
     インポートデータインタフェース	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの [データ] タブの [データ応答結果] セクションをご参照ください。
     ハイライト	データ項目に対応する要素を強調表示します。 参照データの例を次に示します。 return { "data": {}, "options": { "style": { "stroke": "#f00" 、 "fill": "" }, "selectMode": "single" 、 "cancelHighlightFirst": false } }
     ハイライトをキャンセル	データ項目の対応する要素のハイライトを解除します。 参照データの例を次に示します。 return { "data": {}, "options": { "mode": "single" } }
     クリアウィジェット	ウィジェットテキストは、パラメータを指定する必要なく消去されます。
     ウィジェット設定の更新	ウィジェットのスタイル設定は動的に更新されます。 ウィジェットの [設定] タブで、[設定をクリップボードにコピー] をクリックしてウィジェット設定データを取得します。 その後、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" } }