すべてのプロダクト
Search

このプロダクト

    DataV:バブルチャートのウィジェット

    ドキュメントセンター

    DataV:バブルチャートのウィジェット

    最終更新日:Jul 17, 2024

    このトピックでは、バブルチャートのチャートスタイルと構成パネルについて説明します。

    チャートスタイル

    バブルチャートは散布図の一種です。 散布図と比較して、バブルチャートはバブルを使用してデータを表示します。 バブルのサイズをカスタマイズして、複数の時点での離散データの違いを視覚的かつ鮮明に表示できます。

    image..png

    設定パネル image..png

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

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

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

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

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

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

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

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

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

    • グローバルスタイル image..png

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

      • マージン

        • Top: バブルチャートとウィジェットの上部境界の間の距離。 単位: ピクセル。

        • 下: バブルチャートとウィジェットの下限の間の距離。 単位: ピクセル。

        • Left: バブルチャートとウィジェットの左枠の間の距離。 単位: ピクセル。

        • Right: バブルチャートとウィジェットの右枠の間の距離。 単位: ピクセル。

      • データ制限: レイアウト、図面、およびコンピューティング用にロードできるデータレコードの最大数を指定します。 これにより、視覚化されたアプリケーションが有効になります。

    • X軸: ウィジェットのx軸スタイル。 アイコンをクリックする眼睛图标と、x軸を表示または非表示にできます。 image..png

      • テキストスタイル

        • フォントの色: x軸上のテキストの色。

        • フォントサイズ: x軸上のテキストのフォントサイズ。 有効な値: 10 ~ 100

        • フォントの太さ: x軸上のテキストのフォントの太さ。

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

        説明

        データ形式と設定形式が統一されていない場合、ウィジェットは異常表示されます。

        • データタイプ: x軸ラベル付きデータのタイプ。 有効な値：

          • 数値: 整数や浮動小数点数などの数値データがサポートされています。

          • Category: 文字または文字列タイプのデータがサポートされています。

          • 時間: 時間型のデータ。 データ形式を設定する必要があります。

        • データ形式: データ表示形式 (時間データに対してのみ有効) は、% Y/% m/% d % H:% M:% S形式を参照して設定してください。

        • 表示形式: 表示するデータ形式。 このパラメーターは、時間および数値データに対してのみ有効です。 % m/% d % Y % H:% M:% S時間、整数参照dおよび浮動小数点参照 .1fを参照してください。

        • 最大値: x軸の最大値。 カスタム値を指定できます。 デフォルト値はautoです。 システムは、タグの最大値、最小値、および数に基づいて一致を自動的に計算します。

        • 最小値: x軸の最小値。 カスタム値を指定できます。 デフォルト値はautoです。 システムは、タグの最大値、最小値、および数に基づいて一致を自動的に計算します。

        • 単位: x軸の単位。

        • 数量: x軸上のラベルの数。

        • 角度: x軸ラベルの角度。 有効な値: 水平、斜め、および垂直。

      • 軸: 軸のカラー、表示、非表示の設定。

      • ネットワーク回線: グリッド線の色、表示、非表示の設定。

    • Y軸

      構成はx軸と同様である。 詳細については、x軸のセクションをご参照ください。 image..png

    • Bubble: バブルのサイズ。

      Y軸によるマッピング

      • オンにすると、バブル半径の最大値と最小値は、データ内のyフィールドの最大値と最小値によってマッピングされます。

      • このスイッチをオフにする場合、バブルのサイズを制御するために、最小値と最大値の間隔範囲をカスタマイズする必要があります。

        • 最小: バブルの最小値。 データ内のrフィールドの値から、設定した値が減算されます。 結果が負の数の場合、バブルは表示されません。 結果が正の数の場合、バブルが表示されます。 バブルの半径は :( r値-最小値) /最大値 * r値です。

        • 最大: バブルの最大値。 システムは、データ内のrフィールド値から最小値を減算します。 結果が負の数の場合、バブルは表示されません。 結果が正の数の場合、バブルが表示されます。 バブルの半径は :( r値-最小値) /最大値 * r値です。

    • 凡例: チャートの凡例スタイル。 アイコンをクリックすると眼睛图标、凡例を表示または非表示にできます。 image..png

      • テキスト

        • フォントサイズ: 凡例テキストのサイズ。

        • 色: 凡例のテキストの色。

        • フォントの太さ: 凡例テキストのフォントの太さ。

      • レイアウト

        • 間隔

          • 左と右の間隔: 隣接する凡例の左側と右側の間の距離。 この設定項目は、複数のシリーズがある場合にのみ有効です。

          • 距離: 凡例とウィジェットの上下の境界との間の距離。

        • 位置: ウィジェットの開始座標を基準とした凡例の位置。 このフィールドはオプションです。

    • ダイアログボックス: プレビューページまたは公開ページでマウスオーバーまたはバブルをクリックしたときに表示されるダイアログボックスのスタイル。 image..png

      • トリガータイプ: トリガーするターゲットのタイプを示すダイアログボックス。 このフィールドはオプションで、[データ項目] と [軸] を含みます。

      • トリガーアクション: トリガーするアクションのダイアログボックス。 このフィールドはオプションで、[ホバー] と [クリック] を含みます。

      • 消える遅延時間: トリガー条件が満たされない場合、ダイアログボックスは消えます。 この設定項目は、ダイアログボックスが消えるまでの遅延時間を設定します。 単位：ms。

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

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

        • カスタム背景ボックスサイズ: ダイアログボックスの幅と高さ (px単位) 。

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

        • 水平オフセット: マウスの矢印に対するダイアログボックスの水平オフセット。 単位: ピクセル

        • 垂直オフセット: マウスの矢印に対するダイアログボックスの垂直オフセット。 単位: ピクセル

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

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

      • テキストスタイル: ダイアログボックス内のテキストのスタイル。

        • 色: テキストの色を表示します。

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

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

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

      • 軸インジケーター: ダイアログボックスのトリガータイプが軸で、トリガーアクションが実行されたときに表示される軸インジケーターのスタイル。

        • Type: 軸インジケーターのタイプ。 Line Indicatorのみがサポートされています。

        • 線のスタイル: 線の色、幅、および種類を示します。 線の種類はオプションで、実線、破線、点線を含みます。

    • data series: 右側の加号图标または垃圾桶图标アイコンをクリックして、データシリーズを追加または削除します。 image..png

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

      • 塗りつぶしの色: このシリーズの泡の塗りつぶしの色。 詳細については、「カラーピッカーの説明」をご参照ください。 カラーフィルとグラデーションフィルがサポートされています。

      • 枠の色: バブルの枠の色。

    • Animation: チャートのアニメーション効果スタイル。 アイコンをクリックすると眼睛图标、アニメーション効果を有効または無効にできます。 image..png

      • 初期アニメーション期間: コンポーネントによってレンダリングされる最初のアニメーションの期間。 単位：ms。

      • イーズメント効果: アニメーションのイージング効果。 このシステムは、さまざまな共通の緩和効果を提供します。

      • 更新アニメーション期間: ウィジェットデータが更新されたときのアニメーション期間。 単位：ms。

    データパネル

    image..png

    • x: 各バブルのカテゴリ、つまりx軸の値。 フィールドのタイプと形式は、構成項目のx軸のラベルのデータ型と形式と一致している必要があります。

    • y: 各バブルの値、つまりy軸の値。

    • r: 各バブルの半径。

    • s :( オプション) シリーズの値。 このフィールド値は、設定項目data seriesのseries nameが空の場合に使用されます。

    表1. パラメーター

    パラメーター

    説明

    制御モード

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

    自動データ要求

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

    データソース

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

    データフィルター

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

    データ応答結果

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

    相互作用パネル image..png

    ウィジェット操作機能を有効にするには、[有効化] を選択します。 バブルチャートでバブルをクリックすると、データ要求がトリガーされ、コールバック値がスローされ、さまざまなバブルのデータが動的に読み込まれます。 デフォルトでは、x、y、sの値が返されます。 詳細については、「ティッカーボードのコールバックIDの設定」をご参照ください。

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

    1. Canvas Editorでウィジェットを右クリックし、[Blueprint Editorにエクスポート] を選択します。

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

    3. Blueprint Editorで、[追加ノード] ペインの [バブルチャート] ウィジェットをクリックします。 次の図に示すように、バブルチャートウィジェットのパラメーターをキャンバスに表示できます。 image..png

      • イベント

        イベント

        説明

        バブルチャートのインターフェイス要求が完了したとき

        イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 具体的なデータ例の詳細については、キャンバスエディターの「」 [データ応答結果] セクションの [データ] タブをご参照ください。

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

        バブルチャートでバブルをクリックしたときにスローされるイベント。 イベントは、バブルに対応するデータ項目もスローします。

      • Action

        ポリシーアクション

        説明

        バブルチャートのインターフェースを要求する

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

        バブルチャートのインポート

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

        ハイライト

        データ項目に対応する要素を強調表示します。 次の例は、パラメーターを示しています。 

        return {
  "data": {},
  "options": {
    "style": {
      "stroke": "#f00" 、
      "fill": ""
    },
    "selectMode": "single" 、
    "cancelHighlightFirst": false
  }
}

        ハイライト解除

        データ項目に対応する要素の強調表示をキャンセルします。 次の例は、パラメーターを示しています。 

        return {
  "data": {},
  "options": {
    "mode": "single"
  }
}

        クリアコンポーネント

        コンポーネントデータをクリアします。 パラメータは必要ありません。

        コンポーネント設定の更新

        ウィジェットのスタイル設定は動的に更新されます。 [設定] パネルで、[設定をクリップボードにコピー] をクリックして、コンポーネントの設定データを取得します。 その後、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"
      }
    }