DataV:カルーセル-円グラフ

チャートスタイル

カルーセル円グラフは円グラフの一種です。 他のタイプの円グラフと比較して、カルーセル円グラフを使用すると、カルーセル内の各タイプのパーセンテージまたは値を表示できます。 パーセンテージまたは実際の値をカスタマイズして、データダッシュボードにデータのパーセンテージまたは変更をより鮮明に表示できます。

スタイルパネル

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

  • Size: ウィジェットの幅と高さ。 単位: ピクセル。

  • ポジショニング: コンポーネントのx軸とy軸。 単位: ピクセル。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。

  • 回転: ウィジェットを度で回転させます。

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

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

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

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

• 円グラフ属性: 円グラフの基本属性。

  パラメーター	説明
  内側半径	円グラフの内側の半径。 値はウィジェットの高さの割合です。 有効な値は 0～1 です。
  外側半径	円グラフの外側の半径。 値はウィジェットの高さの割合です。 有効な値は 0～1 です。
  アニメーション期間	各カテゴリのセクターが円グラフの外側に突出するのにかかる時間 (ms) 。
  カルーセル間隔	1つのカテゴリの円グラフが終了、格納、および次のカテゴリのファンアウトアニメーションの開始までの時間 (ms) 。
  デフォルトの色	円グラフのデフォルトの色。 詳細については、「カラーピッカーの説明」をご参照ください。

• 中央パーセンテージ部分: 円グラフの中央パーセンテージ部分のスタイル。

  パラメーター	説明
  テキストスタイル	テキストのフォント、色、重さなど、中央のパーセンテージ部分のテキストスタイル。
  有効	スイッチをオンにすると、中央のパーセンテージ部分のテキストがその幅を超えると、コンテンツは自動的に折り返します。 そうしないと、テキストがオーバーフローします。
  実際の値を表示	スイッチをオンにしてデータの実際の値を表示します。スイッチをオフにして、システムによって自動的に計算されたデータのパーセンテージ値を表示します。 説明 デフォルトでは、パーセント値が表示されます。 スイッチをオンにすると、実際のデータ値が表示されます。
  パーセント記号	パーセント値の単位シンボル。
  パーセントフォントサイズ	パーセント値単位のテキストサイズ。
  パーセントポジション	パーセント値の単位シンボルの位置。 Valent値: PrependedおよびPostpended
  パーセントオフセット値	パーセント記号とパーセント距離。 説明 上記の4パーセント記号の設定は、[真値の表示] が無効な場合にのみ有効です。
  小数点以下	小数点以下の桁数、パーセンテージ、および実データが適用され、値の範囲は0〜10です。
  フレームの割合	中央のパーセンテージの幅。 値は、円グラフの外半径の割合です。 有効な値は 0～1 です。 設定が小さい場合、数字と記号は2行で表示されます。 設定が小さすぎると、数字と記号が一緒に絞られます。
  ディジットの割合	中央のパーセンテージの高さ。 値は、円グラフの外半径の割合です。 有効な値は 0～1 です。
  デジタルフォントサイズ	数値テキストのサイズ。
  説明フォントサイズ	番号の下のカテゴリ名テキストのサイズ。

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

  • Text: 凡例のテキストスタイル。

    パラメーター	説明
    フォントサイズ	凡例テキストのサイズ。
    カラー	凡例のテキストの色。
    フォントの重み	凡例テキストのフォントの太さ。

  • レイアウト: 凡例のレイアウトスタイル。

    • Spacing: 凡例の間隔スタイル。

      パラメーター	説明
      左と右の間隔	隣接する凡例の左側と右側の間の距離。 この設定項目は、複数のシリーズがある場合にのみ有効です。
      上下の間隔	凡例とウィジェットの上下の境界との間の距離。

    • 位置: ウィジェットの開始座標に対する凡例の位置。 [Top Center] 、[Top Center] 、[Top Right] 、[Bottom Center] 、[Bottom Left] 、または [Bottom Right] を選択できます。

• カスタムカテゴリ: またはアイコンをクリックして、カスタムカテゴリを追加または削除します。 またはアイコンをクリックして、複数のカテゴリの配置スタイルを設定します。 アイコンをクリックして、選択したカテゴリの設定をコピーし、同じ設定のカスタムカテゴリを追加します。

  ラベル

  背景色: 円グラフ内のセクターの色。

[データソース] パネル

高度なパネル

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

Blueprintインタラクション

1. 左上隅のアイコンをクリックして、ブループリントページに移動します。

2. [レイヤーノード] タブで、ウィジェットをメインキャンバスに追加します。

3. ブループリント設定パラメータを表示します。

   • イベント

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

   • Action

     Action	説明
     カルーセル円グラフのインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データソース] タブの [データ応答結果] セクションをご参照ください。
     要求カルーセル円グラフ操作	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttps:// api.testで、リクエストカルーセル操作に渡されるデータが { id: '1'} の場合、最終的なリクエスト操作はhttps:// api.test?id=1です。
     移動	ウィジェットを指定した場所に移動します。 詳細については、データ例をご参照ください。 { // 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 animation delay. Unit: milliseconds. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     スイッチ表示 /非表示	ウィジェットを表示するか非表示にするかを切り替えます。 パラメータは必要ありません。
     表示	ウィジェットを表示します。 詳細については、「データ例」をご参照ください。 { "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     非表示	コンポーネントを非表示にします。 詳細については、「データ例」をご参照ください。 { "animationType": "",// The animation method. Valid value: fade. If you do not set this parameter, no animation is available. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。 スタイルパネルで、[設定をクリップボードにコピー] をクリックしてウィジェットの設定データを取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。