DataV:円グラフ

チャートスタイル

円グラフは、カテゴリの割合に基づいてパイを複数のブロックに分割します。 全体のパイはデータの総量を表します。 円グラフは、さまざまな分野で広く使用されており、さまざまなカテゴリの比率を示します。 ラジアンサイズに基づいてさまざまなカテゴリの比率を比較すると、データの比率をすばやく理解できます。

スタイルパネル

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

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

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

• 回転: ウィジェットはウィジェットの中心を中心に回転します。 単位は度で、

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

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

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

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

• グラフィック

  メトリクス	説明
  チャートマージン	アイコンをクリックして、チャートの余白の表示を制御します。 スイッチをオンにすると、円グラフ領域とウィジェットの4つの境界の間の距離を設定できます。 単位: デフォルトでpx。
  パイチャート半径	内径と外径を含む円グラフの半径 (%) 。
  パイチャートの色	円グラフの色の詳細については、「カラーマッパーの使用」をご参照ください。
  パイストローク	円グラフのストロークスタイル (ストロークラインのタイプ、重み値、色など) 。 説明 線の種類が点線または点線として選択されている場合、線の切れ目の長さの値と各切れ目の間の距離も設定できます。
  パイチャートグロー	円グラフの照明スタイル。 アイコンをクリックして、円グラフの照明設定項目の表示を制御します。 発光色: 次のセクタースイッチと不透明度が含まれます。 後続セクタのスイッチをオフにすると、発光色を個別に設定できます。 ぼかし係数: 円グラフのぼかし係数。 値の範囲は0から50です。 値が大きいほど、円グラフ間のグロー範囲がぼやけています。
  10進マージ	表示するスライスの数を制限し、残りのスライスをスライス全体にマージします。 マージされたカテゴリの名前を設定することもできます。 アイコンをクリックして、10進統合をオンまたはオフにします。
  センターコンテンツ	円グラフの中央にあるテキストの内容。 このフィールドは、円グラフの半径の内径が0より大きい場合にのみ表示されます。 アイコンをクリックして、中央コンテンツをオンまたはオフにします。 エリアタイプ: テキストタイプやグラフィックタイプなど、中央のコンテンツエリアのタイプを設定します。 Title: コンテンツのタイトル。 タイトルテキスト: タイトルテキストのフォントスタイル、太さ、フォントサイズ、色を指定します。 タイトルオフセット: 水平方向と垂直方向のコンテンツのオフセットを指定します。 単位: ピクセル。 値の形式: 中央のコンテンツの値の形式を指定します。 [デフォルト] 、11 (整数) 、11.1 (浮動小数点) 、11.11 (浮動小数点) 、11% (パーセンテージ) 、11.1% (パーセンテージ) 、1,111 (数千区切り) 、および1,111.1 (数千区切り) を選択できます。 その他のデータ表示形式については、「データ表示形式」をご参照ください。 Content Prefix and Suffix: コンテンツのプレフィックスとサフィックス。 コンテンツテキスト: 中央のコンテンツのフォントスタイル、太さ、フォントサイズ、色を指定します。 コンテンツオフセット: 中央のコンテンツの水平方向と垂直方向のオフセット。 単位: ピクセル。 画像リンク: 中央コンテンツの画像リンク。 このパラメーターは、[エリアタイプ] パラメーターを [グラフィックタイプ] に設定した場合に表示されます。 画像のスタイル: 中央の画像の幅、高さ、透明度、角の丸みを設定します。 エリアタイプがグラフィックタイプに設定されている場合、画像が表示されます。 オフセット: 中央のコンテンツ画像の水平 /垂直位置と水平 /垂直オフセットを設定します。 このパラメーターは、エリアタイプがグラフィックタイプに設定されている場合に表示されます。
  円グラフラベル	円グラフのラベルスタイル。 アイコンをクリックして、円グラフラベル設定項目の表示を制御します。 ラベル形式: ラベルコンテンツの形式。 フォーマット: [デフォルト] または [割合] を選択します。 ラベルフィールド: ラベルフィールドの位置。 有効な値: Inside、Outside、およびSpider。 data format: タグの数値形式を指定します。 有効な値: Default、11 (整数) 、11.1 (浮動小数点) 、11.11 (浮動小数点) 、11% (パーセンテージ) 、11.1% (パーセンテージ) 、1,111 (数千区切り) 、1,111.1 (数千区切り) 。 その他のデータ表示形式については、「データ表示形式の説明」をご参照ください。 このパラメーターは、ラベルフィールドにデフォルト値パラメーターを設定した場合にのみ表示されます。 接頭辞: 円グラフタグの接頭辞と接尾辞。 タグリーダー: 円グラフタグのリーダースタイル。 アイコンをクリックして、円グラフタグリーダー設定項目の表示を制御します。 しきい値: リーダーの厚さ。 このパラメーターは、[ラベルフィールド] パラメーターで [スパイダー] または [外側] を選択した場合にのみ使用できます。 長さ: リーダーの長さ。 単位: ピクセル。 このパラメーターは、[タグ] フィールドで [スパイダー] を選択した場合にのみ使用できます。 テキストスタイル: テキストのフォントスタイル、太さ、フォントサイズ、色など、円グラフラベルのテキストスタイル。 テキストストローク: 線の太さと色を含む、円グラフラベルのストロークスタイル。
  地図	セクターエリアのマップスタイル。 アイコンをクリックして、マップ設定項目の視覚化を制御します。 説明 マップの背景はグラデーションカラーをサポートしていません。 Type: ステッカーのタイプ。 有効な値: Point、Line、Square、Image。 塗りつぶしスタイル: テクスチャマップの塗りつぶしスタイル。 マップのカラースタイルを設定するには、カラーピッカーの手順を参照してください。 線のスタイル: マップの線のスタイルを指定します。 マップのカラースタイルを設定するには、カラーピッカーの手順を参照してください。 このパラメーターは、タイプをドットまたはスクエアに設定したときに表示されます。 追加スタイル: グラフィックサイズ、グラフィック間隔、行間、回転角度、インターレースなど、マップのその他のスタイル。 [タイプ] を [イメージ] に設定すると、[イメージアドレス] 、[タイルの幅] 、[タイルの高さ] 、[タイルの間隔] 、[回転角度] パラメーターを設定できます。

• アニメーション: 円グラフのアニメーション効果のスタイル。

  メトリクス	説明
  アニメーションスイッチ	スイッチをオンにして、円グラフのアニメーション効果を設定します。
  アニメーション	アニメーションのタイプ。 システムは、水平成長、垂直成長、移動、ズーム、ファンティングなど、複数の一般的なアニメーション効果を提供します。 これらのエフェクトは、スイッチをオンにした後にのみ設定できます。
  アニメーション期間	ウィジェットのアニメーション効果の持続時間。 単位：ms。 この値は、アニメーションスイッチをオンにした後にのみ設定できます。

• Interactive: 円グラフウィジェットのインタラクティブなスタイル。

  • カルーセル: カルーセル機能を有効にすると、ダイアログボックスの設定が適用され、ダイアログボックスはインタラクションによってトリガーされなくなります。 アイコンをクリックして、カルーセル効果を表示または非表示にします。

  • 中央テキストインタラクション: このパラメーターは、グラフィックモジュールの内側半径が0より大きい場合にのみ表示されます。 スイッチをオンにすると、中央のテキスト操作が有効になります。 スイッチをオフにすると、中央のテキスト操作は有効になりません。

    説明

    中央のテキスト操作が有効になると、ダイアログボックスは無効になります。

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

    メトリクス	説明
    モード	オプションのダイアログボックス選択モードには、簡潔とユニバーサルが含まれます。
    トリガー	ダイアログボックスがトリガーされるメソッド。 [ホバー] または [クリック] を選択できます。
    表示位置	ダイアログボックス表示の位置スタイル。 検証値: Top、Bottom、Left、Right。
    タイトルの間隔	ダイアログボックス内のタイトルの間隔。 単位: ピクセル
    タイトルテキスト	ダイアログボックス内のタイトルテキストのスタイル (フォントスタイル、太さ、フォントサイズ、色など) 。
    コンテンツ表示	右側のまたはアイコンをクリックして、ダイアログボックスのコンテンツシリーズを追加または削除します。 またはアイコンをクリックして、複数のダイアログボックスのコンテンツ表示シリーズの配置スタイルを設定します。 アイコンをクリックして、現在のダイアログボックスのコンテンツ表示シリーズ設定をコピーし、同じ設定のダイアログボックスのコンテンツ表示シリーズを追加します。 フィールド名: ダイアログボックスのコンテンツ内のフィールドの名前。 名前はデータパネルのフィールドと一致する必要があります。 表示名: ダイアログボックスのコンテンツの表示名。 接尾辞: ダイアログボックスの内容の接尾辞。
    コンテンツの間隔	ダイアログボックスのコンテンツのテキスト間の間隔。 単位: ピクセル
    コンテンツテキスト	ダイアログボックス内のコンテンツテキストのスタイル (フォントスタイル、テキストの太さ、フォントサイズ、色など) 。
    フレームの背景	箇条書きボックスの背景スタイルをダイアログボックスに表示します。 背景余白: ポップアップ背景の水平および垂直の余白をダイアログボックスに表示します。 背景色: ダイアログボックスの背景色。 枠のスタイル: 枠線の種類、角の丸めサイズ、線幅サイズ、枠線の色など、枠線のスタイルをダイアログボックスに表示します。
    軸インジケータ	軸インジケーター線の種類、太さの値、軸インジケーター線の色など、ダイアログボックスの軸インジケーター線のスタイル。 説明 線の種類が点線または点線として選択されている場合、線の切れ目の長さの値と各切れ目の間の距離も設定できます。

  • 選択された状態: 円グラフの選択された状態。 アイコンをクリックすると、選択した状態を有効または無効にできます。

    メトリクス	説明
    トリガー	円グラフ内のセクターのトリガーモード。 有効な値: [ホバー] および [クリック] 。
    メソッドの選択	円グラフでセクターを選択するために使用する方法。 [単一選択] または [複数選択] を選択できます。
    ファン色	選択したセクターの色。
    ファンストローク	ストロークラインのタイプ、太さ、色など、セクター内のストロークラインのスタイル。 説明 線の種類が点線または点線として選択されている場合、線の切れ目の長さの値と各切れ目の間の距離も設定できます。

• 凡例: 円グラフの凡例スタイル。

  メトリクス	説明
  凡例スイッチ	スイッチをオンにすると、凡例のスタイルを設定できます。 スイッチをオフにすると、凡例スタイルを設定できません。
  凡例の位置	ウィジェットの開始座標に対する凡例の相対位置。 バルブは、Top Left、Top Center、Top Right、Bottom Left、Bottom Center、Bottom Right、Left Top、Left Center、Left Bottom、Right Top、Right Center、およびRight Bottomを含む。
  テキストスタイル	凡例テキストのフォントスタイル、テキストの太さ、フォントサイズ、色。
  カテゴリの凡例	サブタイプの凡例のスタイル。 コンポーネントスタイルパネルで円グラフカラーマッピングタイプパラメーターが名詞カテゴリに設定されている場合にのみ、凡例がカテゴリ凡例として表示されます。 凡例マーカー: 凡例マーカーのサイズと形状。 凡例の間隔: 異なるカテゴリの凡例間の水平方向と垂直方向の距離。 最大幅: 凡例の最大幅。 単位: ピクセル。 ページ反転許可: スイッチをオンにすると、凡例のページ番号スタイルと矢印スタイルが有効になります。 スイッチをオフにすると、凡例のコンテンツが1ページに表示され、反転できません。 Maximum Rows: 変更できる行の最大数。 単位: 行。 スタイル: ページ番号のフォント、太さ、フォントサイズ、色など、ページ番号のスタイル。 矢印スタイル: ページめくりスタイルの矢印のサイズ、デフォルトの色、および無効な色。
  連続的な凡例	連続的な伝説のスタイル。 コンポーネントスタイルパネルで円グラフカラーマッピングタイプパラメーターを数値連続または数値パーティションに設定した場合にのみ、凡例が連続凡例として表示されます。 レールスタイル Type: スライドトラックのタイプ。 有効な値: RectangleおよびTriangle Length: 凡例スライドの長さ。 高さ: 凡例のスライドトラックの高さ。 背景色: 凡例トラックの背景色。 スライダースタイル: 凡例のスライドトラック上のスライダーのスタイル。 最小値: スライダーの最小値。 カスタム値を指定できます。 [自動] を選択して最小値を取得することもできます。 最大値: スライダーの最大値。 カスタム値を指定できます。 [自動] を選択して最大値を取得することもできます。 Size: スライダーのサイズ。 色: スライダーの色。 寸法スタイル: 凡例のテキスト寸法のスタイル。 配置: スライドトラックに対する凡例のテキスト寸法の配置 (上配置、中央、下など) 。 Spacing: 凡例のテキスト寸法とスライドの間の距離。

• ファンスタイル: またはアイコンをクリックして、条件付きスタイルを追加または削除します。 またはアイコンをクリックして、複数の条件付きスタイルの配置スタイルを設定します。 アイコンをクリックして選択したデータ系列をコピーし、条件付きスタイルを追加します。 各シリーズで条件スタイルを設定する方法の詳細については、「条件ツリーの使用」をご参照ください。

  • ファンの色: スイッチをオンにすると、円グラフでセクターの色を設定できません。 スイッチをオフにすると、円グラフのセクターの色を設定できません。

  • テキストラベリング: 現在の条件下でのテキストラベリングのスタイル。

    • テキストコンテンツ: テキスト注釈の内容を指定します。

    • オフセット: テキスト注釈の水平方向と垂直方向のオフセット。 単位: ピクセル。

    • Orientation: テキスト注釈ポイントに対するテキスト注釈の方向 (top、right、bottom、left) 。

    • テキストの背景: テキスト注釈の背景を指定します。背景の色や角の丸みの半径などです。

    • テキストスタイル: テキストコンテンツのテキストスタイル。

    • テキスト行: 行の種類、色、太さ、長さなど、テキスト注釈の行スタイルを指定します。

    • テキストラベルポイント: テキストラベルポイントの塗りつぶしの色と半径を設定します。

      説明

      線のスタイルは線のスタイルと同じです。

[データソース] パネル

高度なパネル

Blueprintインタラクション

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

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

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

   • イベント

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

   • Action

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