すべてのプロダクト
Search
ドキュメントセンター

DataV:EChartsの絵画棒グラフ

最終更新日:Jul 15, 2024

このトピックでは、Echartsの縦棒グラフスタイルと構成パネルについて説明します。

チャートスタイル

碑文絵文字縦棒グラフはヒストグラムの一種です。 SVG画像とヒストグラムは、視覚化アプリケーションでデータを表現するために使用され、データをストーリーの背景に近づけ、視覚的表現をより鮮明にします。

image

設定パネル image

  • 検索設定: [設定] パネルの右上隅にある [検索設定] をクリックします。 [検索設定] パネルで、検索する設定項目の名前を入力して、設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「アセット設定の検索」をご参照ください。

  • Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックする锁定长宽比按键と、ウィジェットの縦横比をロックし、ウィジェットの幅と高さを同じ比率で変更できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。

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

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

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

    • アイコンの圆圈旋转控制图标黒い点をドラッグして、ウィジェットの回転角度を制御します。

    • アイコンをクリックし左右翻转图标て、ウィジェットスタイルを反転します。

    • アイコンをクリックし上下翻转图标て、ウィジェットスタイルを反転します。

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

  • グリッド: 右側のアイコンをクリックして、グリッドスタイルを表示します。 网格

    • Left: グリッドとウィジェットの左枠の間の距離。 デフォルト値: 3% 次のタイプの入力がサポートされています。

      • 特定のピクセル値は、例えば、20である。

      • 20% など、コンテナの高さと幅に対する割合。

      • 中央または、コンポーネントは対応する位置に従って自動的に整列されます。

    • : グリッドとウィジェットの上枠の間の距離。 デフォルト値: 60 次のタイプの入力がサポートされています。

      • 特定のピクセル値は、例えば、20である。

      • 20% など、コンテナの高さと幅に対する割合。

      • 中央または、コンポーネントは対応する位置に従って自動的に整列されます。

    • Right: グリッドとウィジェットの右枠の間の距離。 デフォルト値: 4% 次のタイプの入力がサポートされています。

      • 特定のピクセル値は、例えば、20である。

      • 20% など、コンテナの高さと幅に対する割合。

      • 中央または、コンポーネントは対応する位置に従って自動的に整列されます。

    • : グリッドとウィジェットの下の境界との間の距離。 デフォルト値: 3% 次のタイプの入力がサポートされています。

      • 特定のピクセル値は、例えば、20である。

      • 20% など、コンテナの高さと幅に対する割合。

      • 中央または、コンポーネントは対応する位置に従って自動的に整列されます。

    • : グリッドの幅。 デフォルト値: auto。 幅は適応的である。

    • 高さ: グリッドの高さ。 デフォルト値: auto

    • アダプティブレイアウト: このチェックボックスをオンにすると、ヒストグラムがレイアウトの調整に使用されます。 このチェックボックスをオフにすると、ヒストグラムがレイアウトの調整に使用されます。

    • 背景色: メッシュの背景色を変更します。 デフォルトでは、背景色は透明です。 詳細については、「カラーピッカーの説明」をご参照ください。

    • 枠の色: グリッドの枠の色を変更します。 デフォルトの色は透明です。 詳細については、「カラーピッカーの説明」をご参照ください。

    • 枠サイズ: [+] または [-] をクリックするか、値を入力して枠サイズを調整します。

  • X軸: アイコンをクリックしてX軸を表示します。 x轴

    • Displacement: デフォルト位置からのx軸のオフセット。 デフォルト値は0です。

    • 名前: x軸の名前。

    • 位置: x軸上の名前の位置。 [開始][センター] 、または [終了] を選択できます。 デフォルト値: End

    • 名前スタイル

      • : x軸の名前テキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

      • フォントスタイル: x軸上の名前のフォントスタイル。

      • フォントの太さ: x軸上の名前のフォントの太さ。

      • フォント: x軸上の名前のフォントファミリ。

      • フォントサイズ: [+] または [-] をクリックするか、値を入力して、x軸上の名前のフォントサイズを変更します。

    • 名前の間隔: [+] または [-] 記号をクリックするか値を入力して、軸と軸の間の距離を変更します。

    • 回転名: [+] または [-] 記号をクリックするか値を入力して、軸名の回転角度を変更します。

    • [リバース]: このチェックボックスをオンにすると、軸が逆方向に表示されます。 このチェックボックスをオフにすると、軸が順方向に表示されます。

    • Leave White: グリッドとウィジェットの右枠の間の距離。 デフォルト値: 4% 次のタイプの入力がサポートされています。

      • 特定のピクセル値は、例えば、20である。

      • 20% など、コンテナの高さと幅に対する割合。

      • 中央または、コンポーネントは対応する位置に従って自動的に整列されます。

    • 白のまま: このチェックボックスをオンにすると、軸の両側が空白のままになります。 このチェックボックスをオフにすると、軸の両側が空白のままになります。

    • 最小値: 軸スケールの最小値。 デフォルト値は最小データ値です。 この値は、軸上のデータの最小値が最小スケールとして使用されることを示します。 このパラメーターを設定しないと、軸のスケールが均等に分布するように、最小値が自動的に計算されます。

    • 最大値: 軸上のスケールの最大値。 デフォルト値は [最大データ値] です。 この値は、軸上のデータの最大値が最大スケールとして使用されることを示します。 この値を設定しない場合、最大値は自動的に計算され、軸スケールの均等な分布が保証されます。

    • 自動スケーリング: 選択した場合、座標スケールに強制的にゼロスケールが含まれません。 このパラメーターは、値軸でのみ有効です。 この設定項目は、最大値と最小値を設定すると無効になります。

    • segments: [+] または [-] 記号をクリックするか、値を入力して軸のセグメントを設定します。 このパラメーターを設定しないと、軸のスケールが均等に分布するように、最小値が自動的に計算されます。 このセグメントは単なる推定値であり、実際に表示されるセグメントの数は、セグメント化後の軸スケール表示の可読性に応じてこれに基づいて調整されることに留意されたい。 カテゴリ軸のエラーメッセージは無効です。

    • 最小間隔サイズ: [+] または [-] をクリックするか、値を入力して軸間の最小間隔を指定します。 例えば、座標軸の分割スケールが整数で表示されることを1に保証するように設定することができる。 値軸または時間軸でのみ有効です。

    • ベース: 対数軸のベース。 このパラメーターは、対数軸に対してのみ有効です。

    • : 右側のアイコンをクリックして、x軸を表示します。

      • On Zero: x軸またはy軸の軸が他の軸のゼロスケール上にあるかどうかを示します。 このパラメーターは、他の軸が値軸であり、ゼロスケールを含む場合にのみ有効です。

      • 軸スタイル

        • : カラーピッカーの説明を参照して、x軸線の色を変更します。

        • : [+] または [-] をクリックするか、値を入力してx軸の幅を変更します。

        • Type: x軸線セパレータ軸のタイプ。 オプションです。 有効な値: 実線および破線

        • 不透明度: [+] または [-] 記号をクリックするか値を入力して、x軸の透明度を変更します。 範囲は [0,1] です。

    • スケール: 右側のアイコンをクリックして、x軸にスケールを表示します。

      • ラベルに揃える: このチェックボックスをオンにすると、チェックマークがラベルに揃えられます。 カテゴリ軸で [空白のまま] を選択した場合、このフィールドが有効になります。

      • interval: [+] または [-] 記号をクリックするか、数値を手動で入力して、軸上のスケールの表示間隔を変更します。 これはカテゴリ軸で有効になります。

      • 内部: このチェックボックスをオンにすると、軸のスケールが内側になります。 このチェックボックスをオフにすると、軸のスケールが外側になります。

      • 長さ: スケールの長さを変更するには、[+] または [-] 記号をクリックするか数値を入力します。

      • 軸スタイル

        • : カラーピッカーの説明を参照して、チェックマークの色を変更します。

        • : [+] または [-] 記号をクリックするか値を入力して、目盛りの幅を変更します。

        • Type: 軸のタイプ。 オプションです。 有効な値: 実線および破線

        • 透明度: [+] または [-] 記号をクリックするか値を入力して、目盛りの透明度を変更します。 範囲は [0,1] です。

    • スケールラベル: 右側のアイコンをクリックして、x軸にスケールラベルを表示します。

      • interval: 軸上のスケールラベルの表示間隔です。 このパラメータはカテゴリ軸で有効です。 デフォルトでは、ラベルは互いに重ならない間隔で表示されます。 0すべてのラベルを強制的に表示するように設定できます。 このパラメーターを1に設定すると、他のラベルごとに1つのラベルが表示されます。 このパラメーターを2に設定すると、他のラベルごとに1つのラベルが表示されます。

      • 内部: このチェックボックスをオンにすると、軸のラベルが内側になります。 このチェックボックスをオフにすると、軸のラベルが外側に向きます。

      • Rotate: スケールラベルの回転角度。 カテゴリ軸上のカテゴリラベルを表示できない場合は、スケールラベルを回転させて、それらが重ならないようにすることができます。 回転角度は-90度から90度の範囲です。

      • Outer Spacing: スケールラベルと軸の間の距離。

      • 最小ラベルを表示: このオプションを選択すると、最小スケールのラベルが表示されます。 デフォルトでは、ラベルが重なっている場合、最小スケールのラベルは表示されないと自動的に判断されます。

      • 最大ラベルを表示: このオプションを選択すると、最大スケールのラベルが表示されます。 デフォルトでは、ラベルが重なっている場合、最大スケールラベルは表示されません。

      • テキストスタイル

        • : 軸のスケールラベルの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

        • フォントスタイル: 軸ラベルのフォントスタイル。

        • フォントの太さ: 軸ラベルテキストのフォントの太さ。

        • フォント: 軸ラベルテキストのフォントファミリ。

        • フォントサイズ: 軸スケールラベルテキストのフォントサイズ。

        • Alignment: 軸上のスケールラベルテキストの水平方向の配置。 デフォルト値: Auto。 有効な値:

          • 自動

          • 左揃え

          • センター

          • 右に合わせる

        • 配置: オプション。 有効な値: 上の配置中央の配置、および下の配置

    • 行セパレータ: 右側のアイコンをクリックして、行セパレータを表示します。

      • interval: [+] または [-] 記号をクリックするか、数値を手動で入力して、軸分離線の表示間隔を変更します。 このパラメータはカテゴリ軸で有効です。 デフォルトでは、行セパレータは重複しないポリシー間隔で表示されます。 0を設定すると、すべての行セパレータが強制的に表示されます。 値1は、すべての行セパレータが行セパレータを表示することを示します。 2の値は、すべての2つの行セパレータが行セパレータを表示することを示します。

      • 軸スタイル

        • : [+] または [-] 記号をクリックするか値を入力して、x軸線の線の区切り線の幅を変更します。

        • Type: x軸線セパレータ軸のタイプ。 オプションです。 有効な値: 実線および破線

        • 透明度: [+] または [-] 記号をクリックするか値を入力して、x軸上の線区切りの透明度を変更します。 値の範囲は0から1です。

    • 分割領域: 右側のアイコンをクリックして、分割領域を表示します。

      • interval: [+] または [-] 記号をクリックするか、数値を手動で入力して、軸分離領域の表示間隔を変更します。 このパラメータはカテゴリ軸で有効です。 デフォルトでは、分割領域は重ならない間隔で表示されます。 0、全ての分割領域を強制的に表示するように設定することができる。 値が1に設定されている場合、1つの分割領域が1つおきに表示されます。 値が2に設定されている場合、1つの分割領域が2つの分割領域ごとに表示されます

      • エリアスタイル

        • 透明度: [+] または [-] 記号をクリックするか値を入力して、分割領域の透明度を変更します。 有効な値は 0~1 です。

    • 軸インジケーター: アイコンをクリックして軸インジケーターを表示します。

      • Type: Line indicatorShadow Indicatorなどのインジケーターのタイプ。

      • 自動吸着: このチェックボックスをオンにすると、軸インジケーターが自動的にポイントに吸着されます。 この関数は、数値軸と時間軸上でより意味があり、小さな数値点を自動的に見つけることができます。

      • 初期値: 軸インジケーターの初期位置。 デフォルト値は0です。

      • ステータス: 軸インジケーターの現在のステータス。 このチェックボックスをオンにすると、軸インジケータが表示されます。 このチェックボックスをオンにすると、軸インジケータは非表示になります。

      • ラベル: 右側のアイコンをクリックして、軸インジケーターのラベルを表示します。

        • precision: テキストラベルの値の小数点精度。 デフォルトでは、現在の軸の値に基づいて値が自動的に決定されます。 2などの整数値を指定することもできます。これは、小数点以下2桁が保持されることを示します。

        • 外側の間隔: このオプションをオンにすると、軸インジケータラベルと軸の間に一定の距離があります。 チェックボックスをオフにすると、軸インジケータラベルと軸の間に間隔がありません。

        • テキストスタイル

          • : 軸インジケーターのラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

          • フォントスタイル: 軸インジケータラベルテキストのフォントスタイル。

          • フォントの太さ: 軸インジケーターのラベルテキストのフォントの太さ。

          • フォント: 軸インジケーターのラベルテキストのフォントファミリ。

          • フォントサイズ: 軸インジケータラベルテキストのフォントサイズ。

        • 背景色: 軸インジケーターのテキストラベルの背景色。

        • 枠の色: 軸インジケーターのテキストラベルの枠の色。

        • 枠サイズ: 軸インジケーターのテキストラベルの枠サイズ。

      • 軸スタイル

        • : カラーピッカーの説明を参照して、軸の色を変更します。

        • : [+] または [-] をクリックするか、値を入力して軸の幅を変更します。

        • Type: 軸のタイプ。 オプションです。 有効な値: 実線および破線

        • 不透明度: [+] または [-] 記号をクリックするか値を入力して、軸の透明度を変更します。 範囲は [0,1] です。

      • 影のスタイル

        • : シャドウパターンの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

        • 不透明度: [+] または [-] 記号をクリックするか値を入力して、影の不透明度を変更します。 値の範囲は0から1です。

      • ドラッグハンドル: 右側のアイコンをクリックしてドラッグハンドルを表示します。

        • サイズ: [+] または [-] 記号をクリックするか値を入力して、ドラッグハンドルのサイズを変更します。

        • 外側の間隔: [+] または [-] 記号をクリックするか値を入力して、中心点とドラッグハンドルの軸の間の距離を変更します。

        • : ドラッグハンドルの色。

        • 更新頻度: ハンドルがドラッグされると、大画面の更新サイクルがトリガーされます。 単位:ミリ秒。 値を増やすと、パフォーマンスは向上しますが、エクスペリエンスは低下します。

  • Y軸: 詳細については、「X軸」をご参照ください。

  • ダイアログボックス: 右側のアイコンをクリックして、ダイアログボックスを表示します。 提示框

    • トリガー条件: トリガーの種類。 このパラメーターはオプションです。 [マウス移動トリガー][マウスクリックトリガー] 、および [マウス移動とクリックトリガー] を選択できます。

    • 背景色: ダイアログボックスの背景色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

    • 枠の色: ダイアログボックスの枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

    • 枠サイズ: [+] または [-] をクリックするか、値を入力して背景フレームの枠の太さを変更します。

    • ピン留め: [+] または [-] 記号をクリックするか、手動で数値を入力して背景フレームの内側の余白を変更します。 単位: ピクセル。 デフォルトの内側マージンは5です。

    • テキストスタイル

      • : ダイアログボックスのテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

      • フォントスタイル: テキストのフォントスタイルを表示します。

      • フォントの太さ: テキストのフォントの太さを表示します。

      • フォント: テキストのフォントファミリを表示します。

      • フォントサイズ: テキストのフォントサイズを表示します。

  • シリーズ: 加号图标または垃圾桶图标アイコンをクリックして、条件付きスタイルを追加または削除します。 横排列图标または竖排列图标アイコンをクリックして、複数の条件付きスタイルの配置スタイルを設定します。 アイコンをクリックし复制图标て、選択した条件付きスタイル設定をコピーし、同じ設定の条件付きスタイルを追加します。 系列

    • 名前: カスタムシリーズの名前。 データ内のsフィールド値と一緒に使用する必要があります。

    • 凡例ホバーリンク: このチェックボックスをオンにすると、アイコンがリンクを覆います。

    • 最大列幅: [+] または [-] 記号をクリックするか値を入力して、列の最大幅を調整します。 単位: ピクセル。

    • ヒストグラムの最小高さ: [+] 記号または [-] 記号をクリックするか値を入力して、ヒストグラムの最小高さを調整します。 単位: ピクセル。

    • ヒストグラム間隔: 異なる系列の列間の距離をパーセンテージで表します (30% に応じて、列の幅の30%) 。 2つの列を重ねたい場合は、ヒストグラム間隔-100% に設定できます。これは、列を背景として使用する場合に便利です。

    • カテゴリ間の柱の間隔: 同じシリーズの列間の距離。 デフォルト値は、カテゴリ間隔の20% です。 静的フィールドを設定できます。

    • マーカーグラフィック: カスタムグラフィック。 デフォルト値: Circle。 タグタイプには、NoneCircleRectangleRectangleTriangleDiamondPushpinArrowが含まれます。

    • マーカーの位置: マーカーシリーズの位置。 有効な値: [開始][センター] 、および [終了]

    • 回転角度: [+] または [-] をクリックするか、手動で数値を入力してマーカーの回転角度を変更します。 単位は度で、

    • アイコンの繰り返し: このチェックボックスをオンにすると、アイコンの繰り返し機能が有効になります。

    • アイコンの繰り返し方向: 始点終点など、アイコンの繰り返し方向を指定します。

    • アイコンの余白: [+] または [-] をクリックするか、値を入力してアイコンの余白を変更します。 単位: ピクセル。

    • トリミングアイコン: このチェックボックスをオンにすると、アイコンのトリミング機能が有効になります。

    • 静的: このオプションを選択すると、軸が静的である場合、軸を操作することはできません。

    • タグ

      • 通常のアイテム: 右側のアイコンをクリックして、通常のアイテム (マウスイベントに応答しない列) のラベルテキストを表示します。

        • 位置: 縦棒グラフに対応するラベルの位置を設定します。内側を含みますが、これらに限定されません。

        • テキストスタイル

          • : 共通アイテムのラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

          • フォントスタイル: ラベルテキストのフォントスタイル。

          • フォントの太さ: ラベルテキストのフォントの太さ。

          • フォント: ラベルテキストのフォントファミリ。

          • フォントサイズ: ラベルテキストのフォントサイズ。

      • キーアイテム: 右側のアイコンをクリックして、キーアイテムのラベルテキスト (マウスイベントに応答する列) を表示します。

        • 位置: 縦棒グラフに対応するラベルの位置を設定します。内側を含みますが、これらに限定されません。

        • テキストスタイル

          • : メジャーアイテムのラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

          • フォントスタイル: キーアイテムラベルのフォントスタイル。

          • フォントの太さ: ハイライトラベルテキストのフォントの太さ。

          • フォント: ハイライトラベルテキストのフォントファミリ。

          • フォントサイズ: キーアイテムラベルのフォントサイズ。

    • 要素スタイル

      • 普通のアイテム

        • : カラーピッカーの説明を参照して、共通要素の背景色を変更します。

        • 枠の色: 共通アイテム要素の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

        • 枠サイズ: [+] または [-] 記号をクリックするか値を入力して、通常の要素の枠サイズを変更します。

        • ボーダースタイル: ボーダーのタイプ。 有効な値: SolidおよびDotted。 デフォルト値: Solid

        • 棒グラフフィレット: [+] または [-] 記号をクリックするか値を入力して、棒グラフのフィレットを変更します。

        • 透明度: [+] または [-] 記号をクリックするか値を入力して、通常の要素の透明度を変更します。 有効な値は 0~1 です。

      • 主なアイテム

        • : カラーピッカーの説明を参照して、ハイライト要素の背景色を変更します。

        • 枠の色: メジャーアイテム要素の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

        • 枠の幅: [+] または [-] をクリックするか、手動で値を入力して、キー要素の枠の太さを変更します。

        • ボーダースタイル: ボーダーのタイプ。 有効な値: SolidおよびDotted。 デフォルト値: Solid

        • 透明度: [+] または [-] 記号をクリックするか値を入力して、通常の要素の透明度を変更します。 有効な値は 0~1 です。

  • アニメーション: アニメーションを有効にするには、チェックボックスをオンにします。

  • アニメーションしきい値: [+] または [-] をクリックするか、値を入力してアニメーションしきい値を変更します。 単位:ミリ秒。 1つのシリーズに表示されるグラフィックの数が設定したしきい値を超えると、アニメーション効果が無効になり、コンポーネントがクラッシュしないようになります。

  • アニメーション期間: [+] または [-] 記号をクリックするか値を入力して、最初のアニメーションの期間を変更します。 単位:ミリ秒。

  • イージメントエフェクト: ドロップダウンリストからデータ更新アニメーションのイージングエフェクトを選択します。 デフォルト値はcubicOutです。

[データ] タブ

image

設定フィールドの説明

説明

x

縦棒グラフの各x軸のカテゴリ、つまりx軸の値を設定するために使用します。

y

縦棒グラフの各点の値を設定するために使用します。

s

(オプション) シリーズの値。スタイルパネルのシリーズ構成項目と組み合わせて使用されます。

シンボル

(オプション) アイコンのSVGパスの値。

シンボルサイズ

(オプション) アイコンの幅と高さの値。

[インタラクション] タブ

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

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

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

  2. 左上隅の蓝图图标アイコンをクリックします。

  3. Blueprint Editorで、インポートされたノードペインでピクトグラム縦グラフウィジェットをクリックします。 次の図に示すように、キャンバス上でピクトグラムの縦棒グラフのパラメーターを表示できます。 蓝图

    • Events

      イベント

      説明

      データインターフェイス要求が完了したとき

      イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。

      データインターフェイス要求が失敗した場合

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

    • action

      Action

      説明

      要求データインタフェース

      このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、絵文字の縦棒グラフの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"
            }
          }