DataV:レーダーチャートウィジェット

チャートスタイル

基本レーダーチャートは、他の基本チャートの一種です。 レーダーチャートを使用して、カテゴリデータの比較を複数の次元で視覚的に表示できます。 基本的なレーダーチャートでは、角度軸と極座標軸を使用して、それぞれカテゴリと値を表示できます。 テキスト、グラフィック、アニメーションスタイルをカスタマイズできます。 複数の一連のデータを設定できます。

設定パネル

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

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

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

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

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

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

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

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

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

• チャート

  • マージン: チャート領域とウィジェットの4つの境界の間の距離。 単位: ピクセル。

  • 値ラベル: レーダーチャートの値ラベルスタイル。 アイコンをクリックすると、値のラベルを制御できます。

    Text: valueタグのテキストのフォントスタイル、太さ、フォントサイズ、色。

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

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

• 軸: レーダーチャートのラジアル軸と角度軸のスタイル。

  • ラジアル軸

    • 最大値

      パラメーター	説明
      最小値	ラジアル軸の最小値。 デフォルト値：0
      最大値	ラジアル軸の最大値。 デフォルト値はautoです。これは、システムがデータの最大値と最小値に基づいて一致を自動的に計算することを示します。

    • 軸ラベル: ラジアル軸のラベルスタイル。 アイコンをクリックすると、ラベルを表示または非表示にできます。

      ラベルスタイル: 軸ラベルテキストのフォントスタイル、フォントの太さ、フォントサイズ、および色。

    • Axis: ラジアル軸の軸スタイル。 アイコンをクリックして、軸の表示を制御できます。

      色: 軸の色。

    • グリッド線: ラジアル軸のグリッド線スタイル。 アイコンをクリックすると、グリッド線の表示を制御できます。

      パラメーター	説明
      データ型	グリッドラインのタイプ。 有効な値: SolidおよびDashed。
      カラー	グリッド線の色。

  • 角度軸: 角度軸のスタイル。

    • 開始角度オフセット: チャートの開始角度オフセット。 有効な値: 0 ~ 360度。

    • 軸ラベル: アイコンをクリックすると、角度軸の軸ラベルが表示されます。

      パラメーター	説明
      ラベルスタイル	軸ラベルテキストのフォントスタイル、フォントの太さ、フォントサイズ、および色。
      軸ラベルオフセット	軸ラベルのオフセット。 単位: ピクセル

• シリーズ

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

  パラメーター	説明
  シリーズ値	データパネルのsフィールドに対応するデータ系列の特定の値。
  シリーズ名	凡例の説明テキストコンテンツに対応するデータシリーズの名前をカスタマイズできます。
  ストローク	このシリーズのレーダーチャートのストロークスタイル (ストロークの色とストロークの重みの値を含む) 。
  塗りつぶしの色	このシリーズのレーダーチャートの塗りつぶしの色。
  タグ	このシリーズのレーダー境界点のマーカースタイル。 アイコンをクリックして、境界点マーカーの表示を制御できます。 Type: タグのタイプ。 有効な値: Circle、Diamond、Cross、Square、Lower Triangle、Upper Triangle。 Size: タグのサイズ。 色: マーカーの色。 透明度: タグの透明度。 有効な値は 0～1 です。

• その他

  • Emotion Animation: レーダーチャートのアニメーション効果スタイル。 アイコンをクリックすると、アニメーション効果を有効または無効にできます。

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

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

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

データパネル

設定フィールドの説明

相互作用パネル

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

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

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

2. ページの左上隅にあるアイコンをクリックします。

3. Blueprint Editorで、[追加ノード] ペインの [レーダーチャート] ウィジェットをクリックします。 キャンバスでは、次の図に示すように、基本レーダーチャートのパラメーターを設定できます。

   • イベント

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

   • Action

     ポリシーアクション	説明
     リクエスト基本レーダーチャート	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、基本レーダーチャートのAPIデータソースをhttps:// api.testに設定し、[基本レーダーチャートの要求] アクションに渡されるデータが { id: '1'} の場合、最終的な要求インターフェイスはhttps:// api.test?id=1です。
     基本的なレーダーチャートのインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     ハイライト	データ項目に対応する要素を強調表示します。 参照データの例を次に示します。 return { "data": {}, "options": { "style": { "stroke": "#f00" 、 "fill": "" }, "selectMode": "single" 、 "cancelHighlightFirst": false } }
     ハイライト解除	データ項目に対応する要素の強調表示をキャンセルします。 参照データの例を次に示します。 return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     クリアコンポーネント	コンポーネントデータをクリアします。 パラメータは必要ありません。
     コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。 [設定] パネルで、[設定をクリップボードにコピー] をクリックして、コンポーネントの設定データを取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。
     表示	ウィジェットの例を次に示します。 return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     非表示	次の例は、ウィジェットを非表示にする方法を示しています。 return { "animationType": "" 、 "animationDuration": 1000、 "animationEasing": "リニア" }
     暗黙の状態への切り替え	次の例は、ウィジェットを表示するか非表示にするかを示しています。 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" } }