ラダー列チャート (v3.0以降) - DataV - Alibaba Cloud ドキュメントセンター

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

パラメーター

[設定の検索]: キャンバスエディターの右側のパネルで、[設定] タブをクリックし、右上隅の [設定の検索] をクリックします。検索ボックスに必要な設定項目を入力し、検索アイコンをクリックして設定項目をすばやく見つけます。あいまい一致はサポートされていません。詳細については、「設定の検索」をご参照ください。
Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。アイコンをクリックすると、ウィジェットの幅と高さを比例調整できます。このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。
位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。
回転角度: ウィジェットの中心点を回転点として使用する回転の角度。単位は度 (°) です。次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。
- 回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。
- アイコンの黒い点をドラッグします。
- アイコンをクリックして、ウィジェットを水平に反転します。
- アイコンをクリックして、ウィジェットを垂直に反転します。
不透明度: ウィジェットの不透明度。有効な値: 0と1。このパラメーターが0に設定されている場合、ウィジェットは非表示になります。このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。デフォルト値: 1
グローバルスタイル
- フォント: ウィジェット内のすべてのテキストのフォントファミリ。デフォルト値: Microsoft Yahei
- 列スタイル
  - 列間の間隔: 列間の距離。有効な値は 0～1 です。
  - 列の間隔: 左右の列とウィジェットの左右の境界線の間の距離。有効な値は 0～1 です。
  - 列の間隔: 各グループの複数の列間の距離。有効な値は 0～1 です。
  - ベースのレベリング: 台形の棒グラフのベースの傾き。
- マージン
  - 上: 縦棒グラフとコンポーネントの上部境界の間の距離。
  - 下: 縦棒グラフとコンポーネントの下限の間の距離。
  - Left: 縦棒グラフとコンポーネントの左境界の距離。
  - 右: 縦棒グラフとウィジェットの右端の間の距離。
- 値ラベル: 各列の値ラベルのスタイル。アイコンをクリックすると、値のラベルを表示または非表示にできます。
  - テキスト
    - フォントサイズ: 値ラベルテキストのフォントサイズ。
    - 色: 値ラベルテキストの色。
    - フォントの太さ: 値タグテキストのフォントの太さ。
  - 位置: 値ラベルの位置。値のラベルは、Right、Middle、またはLeftです。
- 最大負荷: システムは、レイアウト、図面、およびコンピューティング用に入力するデータレコードの最大数を読み込みます。これにより、視覚化されたアプリケーションが有効になります。
X軸: 縦棒グラフのx軸スタイル。アイコンをクリックして、x軸を表示または非表示にすることができます。
- テキスト
  - フォントサイズ: x軸上のテキストのフォントサイズ。
  - 色: x軸上のテキストの色。
  - フォントの太さ: x軸上のテキストのフォントの太さ。
- 軸ラベル: 軸のラベルスタイル。アイコンをクリックすると、ラベルを表示または非表示にできます。
  - 角度: 軸ラベルの角度。有効な値: 水平、斜め、および垂直。
  - 数量: x軸に表示できるラベルの最大数。
    説明
    数量が0に設定されている場合、システムはウィジェットデータに基づいて列の数を自動的に照合します。
- Axis: x軸の軸スタイルです。アイコンをクリックして軸を表示できます。
  色: 軸の色。
- グリッドライン: x軸グリッドラインのスタイル。アイコンをクリックすると、グリッド線を表示または非表示にできます。
  色: グリッド線の色。
Y軸: 縦棒グラフのy軸スタイル。アイコンをクリックすると、y軸を表示または非表示にできます。
- テキスト
  - フォントサイズ: y軸上のテキストのサイズ。
  - 色: y軸上のテキストの色。
  - フォントの太さ: y軸のテキストのフォントの太さ。
- 軸ラベル: y軸のラベルスタイル。アイコンをクリックすると、軸ラベルを表示または非表示にできます。
  - 最小値: y軸の最小値の表示モード。値をカスタマイズするか、値を選択できます。
    - 最小データ値: データの最小値。
    - 自動丸め: システムは、軸ラベルの最大値、最小値、および数に基づいて値を自動的に計算します。
  - 最大値: y軸の最大値。値をカスタマイズするか、値を選択できます。
    - 最大データ値: データの最大値。
    - 自動丸め: システムは、軸ラベルの最大値、最小値、および数に基づいて値を自動的に計算します。
  - 数量: 軸ラベルの数。
  - 表示形式: 軸ラベルの表示形式。表示形式をカスタマイズできます。 [デフォルト] を選択した場合、データは元の形式で表示されます。
- 軸単位: y軸の単位。アイコンをクリックすると、軸単位を表示または非表示にできます。
- Axis: y軸の軸スタイルです。アイコンをクリックして軸を表示できます。
  色: 軸の色。
- グリッド線: y軸のグリッド線のスタイル。アイコンをクリックすると、グリッド線を表示または非表示にできます。
  色: グリッド線の色。
凡例: 縦棒グラフの凡例スタイル。アイコンをクリックして、凡例を表示または非表示にできます。
- テキスト
  - フォントサイズ: 凡例テキストのサイズ。
  - 色: 凡例のテキストの色。
  - フォントの太さ: 凡例テキストのフォントの太さ。
- レイアウト
  - 間隔
    - 左と右の間隔: 隣接する凡例の左側と右側の間の距離。この設定項目は、複数のシリーズがある場合にのみ有効です。
    - 距離: 凡例とウィジェットおよび縦棒グラフの上下の境界との間の距離。
  - 位置: ウィジェットの開始座標を基準とした凡例の位置。有効な値: Top Left、Top Center、Top Right、Bottom Left、およびBottom Center Bottom Right。
ダイアログボックス: プレビューページまたは公開ページで縦棒グラフを移動またはクリックしたときに表示されるダイアログボックスのスタイル。
- トリガータイプ: トリガーするターゲットのタイプを示すダイアログボックス。このパラメーターはオプションで、[データ項目] と [軸] を含みます。
- トリガーアクション: トリガーするアクションのダイアログボックス。このパラメーターは、[Hover] および [Click] などのオプションです。
- 消える遅延時間: トリガー条件が満たされない場合、ダイアログボックスは消えます。この設定項目は、ダイアログボックスが消えるまでの遅延時間を設定します。単位：ms。
- 背景ボックススタイル: ダイアログボックスの背景ボックススタイル。
  - 背景色: ダイアログボックスの背景色。
  - カスタム背景ボックスサイズ: ダイアログボックスの幅と高さ (px単位) 。
  - Pin: ダイアログボックスの内側の余白。単位: ピクセル。
  - 水平オフセット: マウスの矢印に対するダイアログボックスの水平オフセット。単位: ピクセル
  - 垂直オフセット: マウスの矢印に対するダイアログボックスの垂直オフセット。単位: ピクセル
  - 枠の色: ダイアログボックスの枠の色。
  - 枠のサイズ: ダイアログボックスの枠のサイズ。単位: ピクセル。
- テキストスタイル: ダイアログボックス内のテキストのスタイル。
  - 色: テキストの色を表示します。
  - フォント: テキストのフォントファミリを表示します。
  - フォントサイズ: テキストのサイズを表示します。
  - フォントの太さ: テキストのフォントの太さを表示します。
- 軸インジケーター: ダイアログボックスのトリガータイプが軸で、トリガーアクションが実行されたときに表示される軸インジケーターのスタイル。
  - Type: 軸インジケーターのタイプ。 Line Indicatorのみがサポートされています。
  - 線のスタイル: 線の色、幅、線の種類を示します。ラインタイプはオプションで、[実線] 、[破線] 、[点線] などがあります。
data series: 右側のまたはアイコンをクリックして、データシリーズを追加または削除します。
- シリーズ名: データシリーズの名前。カスタマイズ可能です。このパラメーターが空の場合、コンポーネントデータのsフィールド値がシリーズ名として表示されます。このパラメーターが空でない場合は、データが返される順序を確認する必要があります。
- 色: このシリーズの色の縦棒グラフ。カラーフィルとグラデーションフィルがサポートされています。
アニメーション: 縦棒グラフのアニメーション効果のスタイル。アイコンをクリックすると、アニメーション効果をオンまたはオフにできます。
- 初期アニメーション期間: コンポーネントによってレンダリングされる最初のアニメーションの期間。単位：ms。
- イージング効果: アニメーションのイージング効果。このシステムは、さまざまな共通の緩和効果を提供します。
- シーケンシャルアニメーション: 有効にすると、各シリーズの縦棒グラフがアニメーションを順番に再生します。無効にすると、すべての縦棒グラフがアニメーションを一緒に再生します。
- 更新アニメーション期間: ウィジェットデータが更新されたときのアニメーション期間。単位：ms。
- 前の位置から開始: このスイッチをオンにすると、ウィジェットデータが更新されたときの前のデータの位置からアニメーションが開始されます。このスイッチをオフにすると、ウィジェットデータが更新されたときの初期位置からアニメーションが開始されます。

フィルタリングテーブルのメタデータ。

数据面板前の図のサンプルJSONコードは次のとおりです。

[
  {
    "x": "内モンゴル" 、
    "y": "400" 、
    "s": "1"
  },
  {
    "x": "内モンゴル" 、
    "y": "180" 、
    "s": "2"
  },
  {
    "x": "浙江" 、
    "y": "200" 、
    "s": "1"
  },
  {
    "x": "浙江" 、
    "y": "100" 、
    "s": "2"
  },
  {
    "x": "遼寧省" 、
    "y": "25" 、
    "s": "1"
  },
  {
    "x": "遼寧省" 、
    "y": "125" 、
    "s": "2"
  },
  {
    "x": "吉林" 、
    "y": "190" 、
    "s": "1"
  },
  {
    "x": "吉林" 、
    "y": "110" 、
    "s": "2"
  },
  {
    "x": "黒竜江省" 、
    "y": "90" 、
    "s": "1"
  },
  {
    "x": "黒竜江省" 、
    "y": "60" 、
    "s": "2"
  },
  {
    "x": "安徽" 、
    "y": "240" 、
    "s": "1"
  },
  {
    "x": "安徽" 、
    "y": "170" 、
    "s": "2"
  },
  {
    "x": "福建" 、
    "y": "420" 、
    "s": "1"
  },
  {
    "x": "福建" 、
    "y": "190" 、
    "s": "2"
  }
]

x: 縦棒グラフの各列のカテゴリ、つまりx軸の値。
y: 縦棒グラフの各列の値、つまりy軸の値。
s :( オプション) 対応するシリーズデータ。

表1. パラメーター

パラメーター	説明
制御モード	スイッチをオンにすると、ウィジェットの初期化時にデータが要求されません。データリクエストは、コールバックIDまたはBlueprint Editorで設定されたメソッドに基づいてのみトリガーされます。スイッチをオフにすると、データ要求が自動的にトリガーされます。デフォルトでは、スイッチはオフになっています。
自動データ要求	[自動データ要求] チェックボックスをオンにすると、動的ポーリングを有効にし、ポーリング間隔を手動で指定できます。このチェックボックスをオンにしないと、データは自動的に要求されません。手動でページを更新してデータを要求するか、Blueprint EditorまたはコールバックIDイベントを使用してデータ要求をトリガーする必要があります。
データソース	キャンバスエディターの右側のパネルで、[データ] タブをクリックします。 [静的データ] の横にある [設定] をクリックします。 [Configure Datasource] パネルで、[data source Type] ドロップダウンリストからデータソースを選択します。コードエディターでデータクエリのコードを入力し、[データ応答のプレビュー] をクリックしてデータソースの応答をプレビューし、応答を表示します。詳細については、「資産データの設定」をご参照ください。
データフィルター	[データフィルタ] チェックボックスをオンにすると、データ構造の変換、データのフィルタリング、および簡単な計算を実行できます。 [フィルターの追加] の横にあるプラス記号 (+) をクリックすると、表示されるエディターでデータフィルターのスクリプトを設定できます。詳細については、「データフィルターの使用」をご参照ください。
データ応答結果	データ要求に対する応答。データソースが変更された場合は、[データ応答結果] の横にあるアイコンをクリックして、データ応答をリアルタイムで表示できます。

相互連携

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

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

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

Blueprint Editorで、[追加ノード] ペインの [ラダー列チャート] ウィジェットをクリックします。 Blueprint Editorでラダー縦棒グラフの設定パラメータを表示できます。

イベント

イベント	説明
ラダー列チャートインターフェイス要求が完了したとき	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。特定のデータについては、「データ」をご参照ください。
データ項目がクリックされたとき	ラダー列グラフの列がクリックされたときに発生するイベントと、その列に対応するデータ項目。

ポリシーアクション

ポリシーアクション	説明
リクエストラダー縦棒グラフインターフェイス	このアクションは、サーバーデータを再度要求するために実行されます。アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。たとえば、APIデータソースが`http:// api.test`で構成され、要求ラダー列チャートインターフェイスに渡されるデータが `{ id: '1'}` である場合、最終的な要求インターフェイスは`http:// api.test?id=1`です。
Import Ladder column chartインターフェイス	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。サーバーデータを再度リクエストする必要はありません。特定のデータについては、「データ」をご参照ください。
ハイライト	データ項目に対応する要素を強調表示します。例： `{ data: { x: 'Shanghai' // You can list multiple highlight conditions, similar to filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }`
ハイライト解除	データ項目に対応する要素の強調表示をキャンセルします。例： `{ data: { x: 'Shanghai' }, options: { mode: 'single' // If the value is single, only one highlight is canceled when multiple data items are hit. If the value is multiple, all highlights are canceled when multiple data items are hit. } }`
コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。
表示	ウィジェットは、パラメータを指定する必要なしに表示されます。
非表示	ウィジェットは、パラメータを指定する必要なしに非表示になります。
暗黙の状態への切り替え	ウィジェットは非表示または表示されます。 { //true indicates that a widget is shown, whereas false indicates that a widget is hidden. "status": true, // Animation is displayed. "animationIn": { // The animation type, which can be set to fade. If it is not specified, no animation is displayed. "animationType": "fade", // The duration in which animation is displayed. It is in the unit of milliseconds. "animationDuration": 1000, // The function that is used to display animation. You can set this parameter to linear\|easeInOutQuad\|easeInOutExpo. "animationEasing": "linear" }, // Animation is hidden. "animationOut": { // The animation type, which can be set to fade. If it is not specified, no animation is displayed. "animationType": "fade", // The duration in which animation is hidden. It is in the unit of milliseconds. "animationDuration": 1000, // The function that is used to hide animation. You can set this parameter to linear\|easeInOutQuad\|easeInOutExpo. "animationEasing": "linear" } }
移動	ウィジェットが指定された場所に移動されます。 `{ // 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" } }`