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

DataV:3D円形バー

最終更新日:Jul 15, 2024

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

チャートスタイル

3Dサークルチャートは円グラフの一種であり、サークル内の各カテゴリの割合を明確かつインテリジェントに表示できます。 3Dリングチャートは、チャートの内側と外側の複数の場所でラベル表示をサポートし、インジケータカード表示スタイルの表示をサポートし、カスタムマルチシリーズデータ構成をサポートします。

image

設定パネル image

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

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

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

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

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

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

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

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

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

  • グラフィック image

    • 投影モード: 3Dループの投影モード。 有効な値: パースペクティブ投影直交投影

    • 視覚距離: リングの3Dビューの視覚距離。 リングの全体的なサイズを調整するために使用されます。 単位: ピクセル

    • 回転角度: 水平回転と垂直回転の間の角度。 アイコンをクリックし开关图标て、回転角度の表示を制御します。

      説明

      回転角度がオンになると、マウスの相互作用における回転に影響を及ぼす。

    • 内径 /外径比: スライダーをドラッグして、ループグラフの内径 /外径比を設定します。

    • 高さマッピング: 3Dループの高さマッピングを指定します。 高さマッピングスイッチをオンにすると、データの値に基づいてループの各部分の高さがマッピングされます。 高さマッピングスイッチがオフになると、ループの各部分の高さは等しくなります。

    • 高さスケール: 3Dループの高さスケール。

    • : 3D円の色を設定します。

    • 10進マージ: 表示するスライスの数を制限し、残りのスライスを合計スライスにマージします。 マージされたカテゴリの名前を設定することもできます。 アイコンをクリックし开关图标て、10進統合をオンまたはオフにします。

    • リングチャートラベリング: リングチャートのラベリングスタイル。 アイコンをクリックし开关图标て、リングチャートラベルの設定項目を制御します。

      パラメーター

      説明

      データ型

      アノテーションのデータ型表示型。 有効な値: PercentageおよびDefault。 有効な値: CommonおよびSpider

      説明

      データエントリ数が3を超える場合は、[表示タイプ] パラメーターの値を [標準] に変更することを推奨します。

      ラベリングフィールド

      リング図のラベルフィールド。 値には、name + valuename、およびvalueが含まれます。

      デリミタ

      リングアイコン列の区切り文字を設定します。 brと入力して行を壊します。 このパラメーターは、リングチャートの列フィールドでname + valueが選択されている場合にのみ設定できます。

      小数点以下の場所

      ラベルフィールドの小数点以下の桁。 単位: digits。

      列の高さ

      ラベルフィールドの行の高さの値。 単位: ピクセル このパラメーターは、リングチャートの列フィールドでname + valueが選択されている場合にのみ設定できます。

      間隔

      ラベルフィールドとリングチャートの間の距離を設定します。 単位はpxです。

      テキストスタイル

      列フィールドのテキストスタイル (フォントスタイル、テキストの太さ、フォントサイズ、色など) 。

  • アニメーション: 3Dループのアニメーションスタイル。 image

    • 自動回転: スイッチをオンにすると、リングダイアグラムが自動的に回転します。 スイッチをオフにすると、リング図は回転しません。

      説明

      自動回転パラメーターをNormalに設定できます。

    • 回転方向: 3Dループの回転方向を設定します。 反時計回りまたは時計回りを選択できます。 このパラメーターは、[自動回転] をオンにした場合にのみ使用できます。

    • 回転速度: 3Dループの回転速度。 このパラメーターは、[自動回転] をオンにした場合にのみ使用できます。

  • インタラクション image

    • マウスインタラクション: 複数のマウス操作を実行して、回転、ズーム、およびズームインまたはズームインできます。 回転操作とズーム操作は、アノテーションタイプが [通常] に設定されている場合にのみサポートされます。

    • ダイアログボックス: プレビューまたは公開ページで、リングチャートの上にポインターを移動するかクリックしたときに表示されるダイアログボックスのスタイル。 アイコンをクリックし开关图标て、ダイアログボックスの設定項目の表示と隠蔽を制御します。

      パラメーター

      説明

      トリガーメソッド

      ダイアログボックスがトリガーされるメソッド。 [ホバー] または [クリック] を選択できます。

      表示位置

      ダイアログボックス表示の位置スタイル。 値はオプションで、topbottomleftrightです。

      タイトルの間隔

      ダイアログボックス内のタイトルの間隔。 単位: ピクセル

      タイトルテキスト

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

      コンテンツテキスト

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

      ポップアップ背景

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

      • 背景余白: ポップアップ背景の水平および垂直の余白をダイアログボックスに表示します。

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

      • 枠のスタイル: ダイアログボックスの枠のスタイル (枠線の幅と色を含む) 。

  • 凡例: リングチャートの凡例スタイル。 image

    パラメーター

    説明

    凡例スイッチ

    スイッチをオンにすると、凡例のスタイルを設定できます。 スイッチをオフにすると、凡例スタイルを設定できません。

    方向

    凡例の向き。 [水平] または [垂直] を選択できます。

    水平アライメント

    凡例の水平方向の配置スタイル。 中央、またはを選択できます。

    垂直アライメント

    凡例の垂直方向の配置スタイル。 [トップ][センター] 、または [ボトム] を選択できます。

    テキストスタイル

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

    カテゴリの凡例

    サブタイプの凡例のスタイル。

    • 凡例マーカー: 凡例マーカーのサイズと形状。

    • 凡例の間隔: 異なるカテゴリの凡例間の水平方向と垂直方向の距離。

    ページめくりを許可

    スイッチをオンにして、凡例ページ機能をオンにします。 凡例の数が多すぎる場合は、ページ番号スタイルと矢印スタイルを設定できます。 スイッチをオフにすると、すべての凡例のコンテンツが1ページに表示され、切り替えることができません。

    • ページスタイル: ページ番号のフォント、太さ、フォントサイズ、色など、ページ番号のスタイル。

    • 矢印スタイル: ページめくりスタイルの矢印のサイズ、デフォルトの色、および無効な色。

  • 効果: 3Dグラフィックスの効果を表示します。 image

    パラメーター

    説明

    ライトとシェード

    オプション。 有効な値: 色のみおよびシェーディング

    照明効果

    このパラメーターは、 [シャドウ] [シャドウ] を選択すると表示されます。

    • メインライト: メインライトの強度、ライトカラー、水平および垂直回転、投影およびシャドウ品質を設定します。

    • アンビエントライト: プライマリ光源の光強度と色を設定します。

    遅い効果

    3Dグラフィックスのポスト効果を設定します。

    • ハイライト: ポストエフェクトのハイライトのグロー強度を設定します。

    • 被写界深度: ポストエフェクトの被写界深度のサイズとぼかし半径を設定します。

  • 条件: 条件スタイルの説明。 image

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

    ファンの色: スイッチをオンにすると、条件のファンの色を設定できません。 スイッチをオフにすると、条件のファンカラーを設定できません。

データパネル

image

設定フィールドの説明

説明

name

各リングブロックのカテゴリ。

各リングブロックの値は、3Dリング図全体に対する各3Dリングブロックの割合を決定する。

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

説明

Interactionイベント

説明

リングチャートをクリックしたとき

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

凡例がクリックされたとき

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

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

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

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

  3. Blueprint Editorで、[ノードのインポート] ペインで [3Dリング] ウィジェットをクリックします。 次の図に示すように、キャンバスでパラメーターを表示できます。 3D环图

    • イベント

      イベント

      説明

      ときに3dループインターフェイス要求が完了

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

      リクエストが失敗したとき

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

      リングチャートをクリックしたとき

      3Dリンググラフのリングブロックがクリックされたときに発生するイベントで、セクターに対応するデータ項目も発生します。

      凡例がクリックされたとき

      3Dリングチャートの凡例がクリックされたときに発生するイベントで、凡例の対応するデータ項目も発生します。

    • Action

      Action

      説明

      リクエスト3dリング図

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

      3Dリング図のインポート

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

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

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