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

DataV:プログレスバーチャート

最終更新日:Jul 15, 2024

このトピックでは、進行状況バーの各構成項目の意味について説明します。

チャートスタイル

進行状況バーを使用すると、色、値、枠線、ダイアログボックスのテキスト、進行状況バーの位置などの設定項目をカスタマイズできます。 これにより、ビジュアルアプリケーションでタスクの進行状況を視覚化できます。 image..png

設定パネル

image..png

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

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

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

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

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

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

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

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

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

  • グローバルスタイル

    パラメーター

    説明

    フォント

    ウィジェット内のすべてのテキストのフォント。 デフォルト値: Microsoft Yahei

    双方の間隔

    プログレスバーとコンポーネントの左右の間の距離。 単位: ピクセル。 有効値: 0~100。

    ダイアログボックスの下の間隔

    ダイアログボックスの下部と進行状況バーの間隔。 単位: ピクセル。 有効値:0 〜 50 です。

  • ダイアログボックス

    パラメーター

    説明

    フォントサイズ

    ダイアログボックスのパーセントテキストのサイズ。 有効な値: 10 ~ 100

    カラー

    パーセントテキストの色をダイアログボックスに表示します。変更するカラーピッカーの指示をご参照ください。

    フォントの重み

    テキストのフォントの太さをダイアログボックスに表示します。

    実際の値を表示

    スイッチをオンにすると、ダイアログボックスのテキストに真の値が表示されます。スイッチをオフにすると、ダイアログボックスのテキストにパーセント値が表示されます。

    値単位

    プログレスバーの単位には実数値が表示されます。 このパラメーターは、[実際の値を表示] 設定項目が有効になった後にのみ設定できます。

    ボーダースタイル

    ダイアログボックスの境界線の色。 アイコンをクリックし眼睛图标て、境界線のスタイルをオンまたはオフにできます。

    小数点

    小数点設定項目は、true値の表示がオフになっている場合にのみオンになります。

    • 10進数: スイッチをオンにすると、ダイアログボックスのデータは、小数点以下の桁まで正確なパーセント値で表示されます。

    • 保持された小数点以下の場所: 予約する小数点以下の場所の数。 有効な値:0〜4。 このパラメーターは、Decimal設定項目をオンにした後にのみ表示されます。

  • パーセンテージバー

    パラメーター

    説明

    グラデーション範囲

    パーセンテージバーのグラデーションタイプ。 有効な値: グローバルグラデーションおよびローカルグラデーション

    スタートカラー

    パーセンテージバーの開始位置の色。

    エンドカラー

    データ比率に達したときのパーセンテージバーの色。

    密度

    パーセンテージバーがいっぱいになったときに表示されるスモールセルの総数。 有効値:1 〜 50 。

    ボーダースタイル

    パーセンテージバーの境界線の色。 アイコンをクリックして眼睛图标、境界線スタイルを有効または無効にできます。

  • 合計値: 進行状況が100% に達したときの実際の値。

    重要

    パーセント値は、(値 /合計または合計値) である。 value値は、[データ] パネルから取得します。 データパネルの合計値のコンテンツは、設定バーの合計値よりも優先度が高くなります。

  • 空の値の更新: スイッチをオンにすると、データが空または異常の場合、ウィジェットの進行状況は0と表示されます。 スイッチをオフにすると、データが空または異常のときにウィジェットの進行状況は更新されません。

データパネル image..png

設定フィールドの説明

パラメーター

説明

プログレスバーの特定の値。 図中のパーセント値は、値 /合計値である。

合計

プログレスバーの合計値。 データパネルの合計値のコンテンツは、構成パネルの合計値よりも優先度が高くなります。

表1. パラメーター

パラメーター

説明

制御モード

スイッチをオンにすると、ウィジェットの初期化時にデータが要求されません。 データリクエストは、コールバックIDまたはBlueprint Editorで設定されたメソッドに基づいてのみトリガーされます。 スイッチをオフにすると、データ要求が自動的にトリガーされます。 デフォルトでは、スイッチはオフになっています。

自動データ要求

[自動データ要求] チェックボックスをオンにすると、動的ポーリングを有効にし、ポーリング間隔を手動で指定できます。 このチェックボックスをオンにしないと、データは自動的に要求されません。 手動でページを更新してデータを要求するか、Blueprint EditorまたはコールバックIDイベントを使用してデータ要求をトリガーする必要があります。

データソース

キャンバスエディターの右側のパネルで、[データ] タブをクリックします。 [静的データ] の横にある [設定] をクリックします。 [Configure Datasource] パネルで、[data source Type] ドロップダウンリストからデータソースを選択します。 コードエディターでデータクエリのコードを入力し、[データ応答のプレビュー] をクリックしてデータソースの応答をプレビューし、応答を表示します。 詳細については、「ウィジェットデータの設定」をご参照ください。

データフィルター

[データフィルタ] チェックボックスをオンにすると、データ構造の変換、データのフィルタリング、および簡単な計算を実行できます。 [フィルターの追加] の横にあるプラス記号 (+) をクリックすると、表示されるエディターでデータフィルターのスクリプトを設定できます。 詳細については、「」をご参照ください。

データ応答結果

データ要求に対する応答。 データソースが変更された場合は、[データ応答結果] の横にあるRefresh icon アイコンをクリックして、データ応答をリアルタイムで表示できます。

相互作用パネル

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

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

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

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

  3. Blueprint Editorで、[追加されたノード] ペインで [進行状況棒グラフ] をクリックします。 次の図に示すように、キャンバスでプログレスバーのパラメーターを表示できます。 进度条蓝图参数

    • イベント

      イベント

      説明

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

      イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理された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"
        }
      };