DataV:基本円グラフ (v3.xバージョン)

パラメーター

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

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

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

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

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

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

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

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

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

• チャート

  • 値ラベル

    パラメーター	説明
    テキスト	テキストのフォントスタイル、フォントサイズ、フォントの色、テキストの太さなど、数値ラベルテキストのスタイル。
    本当の価値	有効にすると、データの実際の値が表示されます。無効にすると、データのパーセント値が表示されます。
    小数点以下	値に表示する小数点以下の桁数。 これは、実際の値が無効になっている場合にのみ設定できます。

  • カテゴリラベル: ラベル内のカテゴリのスタイル。 右側のアイコンをクリックして、カテゴリラベルを表示または非表示にすることができます。

    カテゴリラベルのテキストのスタイル (テキストのフォントスタイル、フォントサイズ、フォントの色、テキストの太さなど) 。

  • ラベルガイド: 円グラフ内のラベルガイドのスタイル。

    パラメーター	説明
    距離からラベルまで	ラベルと円グラフの中心の間の水平距離。 有効な値は 0～1 です。
    ホイールベースセンター	ラベルと円グラフの中心の間の垂直距離。 有効な値は 0～1 です。 設定が小さすぎると、円の中心に囲まれます。

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

    パラメーター	説明
    テキスト	テキストのフォントスタイル、フォントサイズ、フォントの色、フォントの太さなど、凡例のテキストのスタイルを設定します。 詳細については、「カラーピッカーの手順」をご参照ください。
    レイアウト	凡例間の位置関係。 間隔 左と右の間隔: 隣接する凡例の左側と右側の間の距離。 この設定項目は、複数のシリーズがある場合にのみ有効です。 距離: 凡例とウィジェットの上下の境界との間の距離。 位置: ウィジェットの開始座標を基準とした凡例の位置。 有効な値: Top Left、Top Center、Top Right、Bottom Left、およびBottom Center Bottom Right。

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

  パラメーター	説明
  半径	半径は、内側および外側の半径を含む。 内半径: リングの最も内側から軸の中心までの距離。 値は、コンポーネントの高さのパーセンテージです。 有効な値は 0～1 です。 外半径: リングの最も外側から軸の中心までの距離。 値はコンポーネントの高さの割合です。 有効な値は 0～1 です。
  グリッドライン	極軸のグリッド線スタイル。 アイコンをクリックして、グリッド線の表示を制御できます。 色: グリッド線の色。

• シリーズ

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

  色このシリーズのセクターの色。

• その他のシナリオ

  • Easing Animation: 円グラフのアニメーション効果のスタイル。 アイコンをクリックすると、アニメーション効果を有効または無効にできます。

    パラメーター	説明
    アニメーション設定	イージング効果: アニメーションのイージング効果。 このシステムは、さまざまな共通の緩和効果を提供します。 各シリーズのシーケンシャルアニメーション: スイッチをオンにすると、各シリーズのセクターのアニメーションが順番に再生されます。 スイッチをオフにすると、すべてのセクターのアニメーションが同時に再生されます。 ゼロから開始: スイッチをオンにすると、コンポーネントが初めてアニメーションをレンダリングするときに、各セクターがゼロから再生されます。 スイッチをオフにすると、コンポーネントが初めてアニメーションをレンダリングするときに、各セクターが各セクターの先頭から同時に再生されます。
    入場アニメーション	コンポーネントによってレンダリングされる最初のアニメーションの期間。 単位：ms。
    更新アニメーション	更新アニメーション期間: ウィジェットデータが更新されたときのアニメーションの期間。 単位：ms。 前の位置から開始: このスイッチをオンにすると、ウィジェットデータが更新されたときの前のデータの位置からアニメーションが開始されます。 このスイッチをオフにすると、ウィジェットデータが更新されたときの初期位置からアニメーションが開始されます。

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

    パラメーター	説明
    消える遅延時間	トリガー条件が満たされない場合、ダイアログボックスは消えます。 この設定項目は、ダイアログボックスが消えるまでの遅延時間をms単位で設定します。
    トリガー条件	トリガーアクション: トリガーするアクションのダイアログボックス。 このフィールドはオプションで、[ホバー] と [クリック] を含みます。
    テキストスタイル	ダイアログボックス内のテキストのスタイル (フォントスタイル、太さ、フォントサイズ、色など) 。
    背景ボックススタイル	ダイアログボックスの背景ボックススタイル。 背景色: ダイアログボックスの背景色。 カスタム: ダイアログボックスの幅と高さ。 単位: ピクセル。 アイコンをクリックして、カスタムダイアログボックスをオンまたはオフにします。 Pin: ダイアログボックスの内側の余白。 単位: ピクセル。 オフセット 水平オフセット: マウスの矢印に対するダイアログボックスの水平オフセット。 単位: ピクセル 垂直オフセット: マウスの矢印に対するダイアログボックスの垂直オフセット。 単位: ピクセル 国境 境界線: ダイアログボックスの境界線の太さ。 単位: ピクセル。 枠の色: ダイアログボックスの枠の色。

フィルタリングテーブルのメタデータ。

上の図のサンプルJSONコードは次のとおりです。

[
  {
    "x": "Device",
    "y": 14
  },
  {
    "x": "Building materials",
    "y": 12
  },
  {
    "x": "Food",
    "y": 12
  }
]

相互連携

ウィジェット間のインタラクションを有効にするには、[有効化] チェックボックスをオンにします。 基本円グラフのセクターをクリックすると、データリクエストがトリガーされ、コールバック値がスローされ、さまざまなセクターのデータが動的に読み込まれます。 デフォルトでは、データのxとyの値が返されます。 詳細は、「コールバックIDの設定」をご参照ください。

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

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

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

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

   • イベント

     イベント	説明
     基本的な円グラフインターフェイス要求が完了したとき	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータについては、「データ」をご参照ください。
     データ項目がクリックされたとき	基本円グラフのセクターが選択されたときに発生するイベントで、そのセクターに対応するデータ項目も発生します。

   • ポリシーアクション

     ポリシーアクション	説明
     基本的な円グラフ操作のリクエスト	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttp:// api.testで、リクエスト基本円グラフインターフェイスに渡されるデータが { id: '1'} の場合、最終的なリクエストインターフェイスはhttp:// api.test?id=1です。
     基本円グラフのインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータについては、「データ」をご参照ください。
     ハイライト	データ項目に対応する要素を強調表示します。 例： { data: { x: 'Shanghai' // You can list multiple highlight conditions, similar to filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }
     ハイライト解除	データ項目に対応する要素の強調表示をキャンセルします。 例： { data: { x: 'Shanghai' }, options: { mode: 'single' // If the value is single, only one highlight is canceled when multiple data items are hit. If the value is multiple, all highlights are canceled when multiple data items are hit. } }
     クリアコンポーネント	コンポーネントデータをクリアします。 パラメータは必要ありません。
     コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。
     表示	ウィジェットは、パラメータを指定する必要なしに表示されます。
     非表示	ウィジェットは、パラメータを指定する必要なしに非表示になります。
     暗黙の状態への切り替え	ウィジェットは非表示または表示されます。
     移動	ウィジェットが指定された場所に移動されます。 { // 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" } }