すべてのプロダクト
Search

このプロダクト

    DataV:バーチャートの割合 (v4.xバージョン)

    ドキュメントセンター

    DataV:バーチャートの割合 (v4.xバージョン)

    最終更新日:Jul 15, 2024

    このトピックでは、パーセント棒グラフの設定項目について説明します。

    チャートスタイル

    パーセント棒グラフは、縦棒グラフの一種です。 パーセンテージグラフを使用して、複数のデータカテゴリのデータのパーセンテージを表示できます。 これにより、各データカテゴリの割合の違いをより明確かつインテリジェントに表示できます。 百分比占比条形图

    設定パネル image

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

    • Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックする锁定长宽比按键と、ウィジェットの縦横比をロックし、ウィジェットの幅と高さを同じ比率で変更できます。 もう一度クリックしてロックを解除します。 アンロック後のアスペクト比は制限されません。

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

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

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

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

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

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

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

    • チャート名

      • カスタムマージン: 开关图标アイコンをクリックして、カスタムマージンを指定します。 チャート領域とウィジェットの4つの境界の間の距離。 デフォルトの単位: px。

      • カスタム列の幅: 列の幅。 カスタム幅が大きすぎると、同じグループ内の異なる列が重複します。 幅の値は慎重に設定してください。 アイコンをクリックし开关图标て、カスタム列幅の表示を制御します。

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

        パラメーター

        説明

        位置

        値ラベルテキストの位置。 左、中央、または右を選択できます。

        テキストスタイル

        値ラベルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。

        オフセット

        値ラベルの水平方向および垂直方向のオフセット値。

        小数点以下の場所

        値ラベルのデータの小数点以下の桁の値。

      • 凡例: 縦棒グラフの凡例スタイル。 データパネルにsの一連のフィールドデータが含まれている場合、凡例スタイルが有効になります。 アイコンをクリックし开关图标て、凡例を表示または非表示にできます。

        パラメーター

        説明

        ページめくりを許可

        スイッチをオンにすると、凡例の数が多すぎて配置できない場合にページをめくることができます。 スイッチをオフにすると、ページめくりはできません。

        レイアウト

        ウィジェットの開始座標を基準とした凡例の位置。 Valides: Top Left、Top Center、Top Right、Bottom Left、Bottom Center、Bottom Right。

        凡例Tags

        凡例タグのスタイル (凡例の形状スタイルとサイズを含む) 。

        凡例テキスト

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

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

      • X軸

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

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

          パラメーター

          説明

          テキストスタイル

          x軸ラベルテキストのフォントスタイル、太さ、フォントサイズ、および色。

          カスタム数量

          x軸ラベルによって表示される数値。 アイコンをクリックし开关图标て、x軸上のラベルの数を指定できます。

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

          パラメーター

          説明

          タイトルの内容

          x軸タイトルのテキストコンテンツ。

          オフセット

          x軸タイトルのオフセット値。 単位: ピクセル

          テキストスタイル

          x軸タイトルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。

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

          色: x軸の色。

        • 目盛り: 目盛りの長さ、太さ、色を含む、縦棒グラフのx軸目盛りのスタイル。 アイコンをクリックし开关图标て、x軸の目盛りのスタイルを制御できます。

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

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

      • Y軸

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

        • データ型: y軸データのタイプ。

          パラメーター

          説明

          数値タイプ

          整数や浮動小数点数などの数値データをサポートします。

          カテゴリタイプ

          文字や文字列などのカテゴリタイプのデータがサポートされています。

          時間タイプ

          時間タイプのデータは、データ形式を設定する必要があります。

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

          パラメーター

          説明

          表示形式

          表示するデータ形式。 このパラメーターは、時間ベースおよび数値データに対してのみ有効です。 YYYY/MM/DD HH:mm:ss時間、整数参照dおよび浮動小数点参照 .1fを参照してください。

          テキストスタイル

          y軸ラベルテキストのフォントスタイル、テキストの太さ、フォントサイズ、色。

          カスタム数量

          y軸ラベルは数量値を表示します。 アイコンをクリックし开关图标て、y軸ラベルの数を指定できます。

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

          パラメーター

          説明

          タイトルの内容

          y軸タイトルのテキストコンテンツ。

          オフセット

          y軸タイトルのオフセット値。 単位: ピクセル

          テキストスタイル

          y軸上のタイトルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。

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

          色: y軸の色。

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

          色: y軸の目盛りの色。

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

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

    • RDSエディション

      • CSVデータ: スイッチをオンにすると、CSVデータファイルの列マッピングとデータ系列を直接使用できます。 スイッチをオフにすると、シリーズマッピング設定項目が有効になります。 アイコンをクリックすると开关图标、CSVデータスイッチを表示または非表示にできます。

        パラメーター

        説明

        自動フィールド解析

        スイッチをオンにすると、ウィジェットはCSVデータを使用してフィールドを自動的に解析して表示します。 スイッチをオフにすると、フィールドは自動的に解析されません。

        数値フィールドのみ

        スイッチをオンにすると、CSVデータはデータ型のフィールドに対してのみ解析されます。 スイッチをオフにすると、すべてのフィールドのCSVデータが自動的に解析されます。

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

        パラメーター

        説明

        マッピングフィールド

        列名 /フィールド名とシリーズ名の設定項目。 このパラメーターは、[CSVデータ] をオンにし、[フィールドの自動解析] 設定項目をオフにした場合にのみ有効になります。

        • 列名 /フィールド名: データ系列フィールドの値。 フィールドの値をカスタマイズできます。 フィールドが空の場合、ウィジェットデータにsのフィールド値がシリーズフィールド値として表示されます。

        • シリーズ名: データシリーズシリーズの表示名。カスタマイズ可能です。

        シリーズS値およびシリーズ表示設定項目は、CSVデータが非表示になり、シリーズマッピング設定項目スイッチがオンになっている場合にのみ有効になります。

        • Series s Value: データ系列マッピング値。カスタマイズ可能です。 このパラメーターを指定しないと、コンポーネントデータのsフィールド値がシリーズフィールドマッピング値として表示されます。

        • Series Display: データ系列の表示名。カスタマイズ可能です。

        塗りつぶしの色

        このシリーズの下の縦棒グラフの塗りつぶしの色。

      • シリーズマッピング: スイッチをオンにすると、このパラメーターはデータにシリーズs値が含まれている場合に有効になります。 [マッピングフィールド] パラメーターを使用して、特定のシリーズの色と名前を設定できます。 スイッチをオフにすると、[マッピングフィールド] 設定項目は無効になります。

    • 補足

      • 大量データのインタラクション強化: 縦棒グラフに含まれるデータが多すぎる場合は、データインタラクション強化スタイルを設定できます。 アイコンをクリックすると开关图标、インタラクション強化効果を有効または無効にできます。

        パラメーター

        説明

        コマンドの実行方法

        データの相互作用の方法。 デフォルト値はScroll Barです。

        方向

        [水平] と [垂直] を含む、スクロールバーの配置方向。

        タイプ幅

        データカテゴリ列の幅。

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

        図 1. ダイアログボックスパネル 提示框面板

        図2. ダイアログボックスの例 提示框面板

        パラメーター

        説明

        テキストスタイル

        ダイアログボックス内のテキストのスタイル (フォントスタイル、太さ、フォントサイズ、色など) 。

        インジケータ

        インジケーターの幅、線の種類、色など、プロンプトインジケーターのスタイル。 アイコンをクリック开关图标して、インジケータをオンまたはオフにします。

        背景ボックススタイル

        ダイアログボックスの背景ボックススタイル。

        • 背景色: ダイアログボックスの背景色。

        • パディング: ダイアログボックスの内側の余白。 単位: ピクセル。

        • 国境

          • 枠の幅: ダイアログボックスの枠の太さ。 単位: ピクセル。

          • 枠の色: ダイアログボックスの枠の色。

    データパネル image

    設定フィールドの説明

    項目

    説明

    x

    縦棒グラフの各列のカテゴリ。

    y

    縦棒グラフの各列の値。

    s

    オプションです。 対応するシリーズのデータ。

    設定項目

    セクション

    制御モード

    スイッチをオンにすると、アセットの初期化時にデータは要求されません。 データは、コールバックIDまたはBlueprint Editorで設定されたメソッドを使用してのみ要求されます。 スイッチをオフにすると、自動更新を使用してデータを要求できます。 デフォルトでは、スイッチはオフになっています。

    自動データ要求

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

    データソース

    [データソースの設定] をクリックします。 [データソースの設定] パネルで、データソースの種類とクエリコードを変更し、データソースの応答をプレビューして、応答結果を表示します。 詳細については、「資産データの設定」をご参照ください。

    データフィルター

    [データフィルタ] チェックボックスをオンにすると、データ構造の変換、データのフィルタリング、および簡単な計算を実行できます。 [フィルターの追加] をクリックします。 [データソースの設定] パネルで、データフィルタースクリプトを設定します。 詳細については、「使用方法」をご参照ください。

    データ応答結果

    データ要求に対する応答。 データソースが変更された場合は、右側の刷新图标 アイコンをクリックして、応答結果をリアルタイムで表示できます。

    インタラクティブパネル image

    Interactionイベント

    説明

    データ項目がクリックされたとき

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

    凡例をクリックしたとき

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

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

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

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

    3. Blueprint Editorで、[追加されたノード] ペインの [割合棒グラフ] ウィジェットをクリックします。 キャンバスでは、次の図に示すように、パーセント棒グラフのパラメーターを設定できます。 image

      • イベント

        イベント

        説明

        パーセント棒グラフインターフェイス要求が完了したとき

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

        パーセント棒グラフインターフェイス要求が失敗した場合

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

        データ項目がクリックされたとき

        パーセント棒グラフのバーがクリックされたときに発生するイベントと、バーに対応するデータ項目。

        凡例をクリックしたとき

        パーセント棒グラフの凡例がクリックされたときに発生するイベントと、凡例に対応するデータ項目。

      • Action

        Action

        説明

        リクエスト率棒グラフインターフェイス

        このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttps:// api.testに設定され、[Request Percentage Bar Chart] インターフェイスに転送されるデータが { id: '1'} に設定されている場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1になります。

        インポート率バーチャート

        ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。

        ハイライト

        データ項目に対応する要素を強調表示します。 参照データの例は以下の通りである。 

        {
  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"
      }
    }