DataV:基本パイチャートII

チャートスタイル

基本円グラフは円グラフの一種です。 極座標を使用して、グラフのサイズを決定したり、グラフの外側にラベルを表示したり、実際の値とパーセント値を切り替えたり、グラフィックスタイルをカスタマイズしたり、マルチシリーズデータを構成したりできます。 各カテゴリの比率を明確かつインテリジェントに表示できます。

設定パネル

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

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

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

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

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

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

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

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

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

• チャート

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

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

    パラメーター	説明
    ストロークカラー	円グラフのストロークの色。
    ストローク重量	円グラフのストロークの重み値。

  • 値ラベル: 円グラフ内の値ラベルのスタイル。 アイコンをクリックして、値ラベルを表示するかどうかを制御できます。

    パラメーター	説明
    場所	ラベルテキストの表示位置。 有効な値: Inside、Outside、およびSpider。
    テキストスタイル	値ラベルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。

  • 凡例: 基本的な円グラフの凡例スタイル。 アイコンをクリックして凡例を表示できます。

    パラメーター	説明
    ページめくりを許可	スイッチをオンにすると、凡例の数が多すぎて配置できない場合にページをめくることができます。 スイッチをオフにすると、ページめくりはできません。
    レイアウト	ウィジェットの開始座標に対する凡例の位置。 [左上] 、[上中央] 、[上右] 、[下左] 、[下中央] 、または [下右] を選択できます。
    凡例Tags	凡例タグのスタイル (凡例の形状スタイルとサイズを含む) 。
    凡例テキスト	凡例のフォントスタイル、テキストの太さ、フォントサイズ、色など、凡例テキストのスタイル。

• 軸: 円グラフのラジアル軸スタイル。

  半径: 円グラフの半径。

• シリーズ

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

    パラメーター	説明
    マッピングフィールド	name Field Value: データ系列フィールドの値。 値をカスタマイズできます。 このパラメーターを指定しないと、ウィジェットデータのnameフィールド値がシリーズフィールド値として表示されます。 このパラメーターが空でない場合は、データが返される順序を確認する必要があります。 表示名: データ系列の表示名。カスタマイズ可能です。
    カラー	このシリーズの円グラフの色。

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

• その他

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

  パラメーター	説明
  テキストスタイル	ダイアログボックス内のテキストのスタイル (フォントスタイル、太さ、フォントサイズ、色など) 。
  背景ボックススタイル	ダイアログボックスの背景ボックススタイル。 背景色: ダイアログボックスの背景色。 Pin: ダイアログボックスの内側の余白。 単位: ピクセル。 国境 境界線: ダイアログボックスの境界線の太さ。 単位: ピクセル。 枠の色: ダイアログボックスの枠の色。

[データ] タブ

設定フィールドの説明

インタラクティブパネル

説明

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

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

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

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

   • イベント

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

   • Action

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