基本横棒グラフ (v3.xバージョン) - DataV - Alibaba Cloud ドキュメントセンター

基本的な横棒グラフは、縦棒グラフの一種です。カスタムx軸間隔、マルチシリーズデータ構成、およびスタックデータ表示をサポートします。小さな視覚化アプリケーションスペースで多次元データの違いをインテリジェントに表示できます。このトピックでは、水平方向の基本縦棒グラフで各構成項目の意味について説明します。

パラメーター

[設定の検索]: キャンバスエディターの右側のパネルで、[設定] タブをクリックし、右上隅の [設定の検索] をクリックします。検索ボックスに必要な設定項目を入力し、検索アイコンをクリックして設定項目をすばやく見つけます。あいまい一致はサポートされていません。詳細については、「」をご参照ください。
Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。アイコンをクリックすると、ウィジェットの幅と高さを比例調整できます。このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。
位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。
回転角度: ウィジェットの中心点を回転点として使用する回転の角度。単位は度 (°) です。次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。
- 回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。
- アイコンの黒い点をドラッグします。
- アイコンをクリックして、ウィジェットを水平に反転します。
- アイコンをクリックして、ウィジェットを垂直に反転します。
不透明度: ウィジェットの不透明度。有効な値: 0と1。このパラメーターが0に設定されている場合、ウィジェットは非表示になります。このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。デフォルト値: 1

チャート

マージン

パラメーター	説明
トップ	コンポーネントの上部境界からの縦棒グラフの距離。
ボトム	コンポーネントの下部境界からの縦棒グラフの距離。
左	縦棒グラフとコンポーネントの左境界の距離。
正しい	コンポーネントの右境界からの縦棒グラフの距離。

最大負荷: 入力データレコードの最大数を指定できます。システムは、レイアウト、描画、およびコンピューティング用の入力データレコードの最大数を読み込みます。これにより、視覚的なアプリケーションが保証されます。
縦棒グラフのスタイル: 縦棒グラフの各列のスタイル。
背景色: 列の背景色。詳細については、「カラーピッカーの説明」をご参照ください。

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

パラメーター	説明
テキスト	値ラベルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。
保存先	値ラベルテキストの位置。左、中央、右、または右外側を選択できます。
Nullableデータ	スイッチをオンにしても、値タグデータはウィジェット列に表示されます。スイッチをオフにすると、値タグデータはウィジェット列に表示されません。

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

パラメーター

説明

テキスト

凡例テキストのフォントスタイル、テキストの太さ、フォントサイズ、色。

レイアウト

凡例間の位置関係。

間隔
- 左と右の間隔: 隣接する凡例の左側と右側の間の距離。この設定項目は、複数のシリーズがある場合にのみ有効です。
- 距離: 凡例とウィジェットおよび縦棒グラフの上下の境界との間の距離。
位置: ウィジェットの開始座標を基準とした凡例の位置。有効な値: Top Left、Top Center、Top Right、Bottom Left、およびBottom Center Bottom Right。

軸: x軸またはy軸を選択できます。

x軸

X軸表示: このスイッチをオンにすると、ウィジェットのx軸スタイルが表示されます。このスイッチをオフにすると、ウィジェットのx軸スタイルは表示されません。
Range: x軸の最大値の範囲。
最大値: x軸上の値の最大値。値をカスタマイズするか、値を選択できます。
- 最大データ値: データの最大値。
- 自動丸め: データの最大値、最小値、およびメトリックポイント数が自動的に計算されます。

軸ラベル: 縦棒グラフのx軸ラベルのスタイル。

パラメーター	説明
表示形式	x軸ラベル値の表示形式。 [デフォルト] 、11 (整数) 、11.1 (浮動小数点) 、11.11 (浮動小数点) 、11% 、11.1% 、または11.11% を選択できます。
テキスト	x軸ラベルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。
軸ラベル表示	x軸ラベルの数と単位。

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

Y軸

Y軸表示: スイッチをオンにすると、ウィジェットのy軸スタイルが表示されます。スイッチをオフにすると、ウィジェットのy軸スタイルは表示されません。
ホワイトスペース: y軸の上辺と下辺の間の距離。有効な値は 0～1 です。
interval: y軸の列間の間隔。値が大きいほど、列が細くなり、間隔が大きくなります。値の範囲は0から0.95です。

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

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

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

シリーズ

data series: 右側の加号图标または垃圾桶图标アイコンをクリックして、データシリーズを追加または削除します。横排列图标または竖排列图标アイコンをクリックして、複数のデータ系列の配置スタイルを設定します。

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

その他のシナリオ

Emotion Animation: 棒グラフのアニメーション効果のスタイル。アイコンをクリックすると眼睛图标、アニメーション効果を有効または無効にできます。动画面板

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

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

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

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

上の図のサンプルコード:

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

表 1. フィールドの説明

パラメーター	説明
x	縦棒グラフの各列のカテゴリ。
y	縦棒グラフの各列の値。
s	オプションです。対応するシリーズのデータ。

表1. パラメーター

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

相互連携

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

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

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

Blueprint Editorで、[追加ノード] ペインの [水平棒グラフ] ウィジェットをクリックします。キャンバスに水平棒グラフのパラメータを表示できます。

イベント

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

ポリシーアクション

ポリシーアクション	説明
要求水平棒グラフインターフェイス	このアクションは、サーバーデータを再度要求するために実行されます。アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。たとえば、APIデータソースが`http:// api.test`に設定されており、Request horizontal column chart APIに転送されるデータが `{ id: '1'}` に設定されている場合、最終的なリクエストインターフェイスは`http:// api.test?id=1`です。
横棒グラフのインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。サーバーデータを再度リクエストする必要はありません。特定のデータについては、「データ」をご参照ください。
ハイライト	データ項目に対応する要素を強調表示します。例： `{ data: { x: 'Shanghai' // フィルターに似た複数のハイライト条件をリストできます。 }, オプション: { style: { fill: 'red' }, selectMode: 'シングル' 、 cancelHighlightFirst: true } }`
ハイライト解除	データ項目に対応する要素の強調表示をキャンセルします。例： `{ data: { x: 'Shanghai' }, オプション: { mode: 'single' // 値が単一の場合、複数のデータ項目がヒットしたときに1つのハイライトのみがキャンセルされます。値が複数の場合、複数のデータ項目がヒットすると、すべてのハイライトがキャンセルされます。 } }`
クリアコンポーネント	コンポーネントデータをクリアします。パラメータは必要ありません。
コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。その後、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" } }`