DataV:ラジアル棒グラフウィジェット

チャートスタイル

放射状の縦棒グラフは、縦棒グラフの一種です。 放射状の縦棒グラフは、基本的な縦棒グラフと比較して、限られた視覚化アプリケーションスペースでさまざまなデータの違いをより直感的に表示できます。

設定パネル

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

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

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

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

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

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

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

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

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

• チャートオプション: 縦棒グラフの曲線列のスタイル。

  パラメーター	説明
  インナー半径	円の中心から円弧状の柱の内側の円弧までの距離。 有効な値は 0～1 です。
  外半径	円の中心から円弧状の柱の外側の円弧までの距離。 有効な値は 0～1 です。
  バー	放射状の棒グラフの列の数。 説明 列の数がデータのタイプの数を超える場合、余分な列は透明な形式でその位置を占めます。
  半径パディング	湾曲した列間の距離。 単位: ピクセル
  最大角度	0〜360の範囲の円弧状の列の最大ラジアン。 値が360 (i) のとき。 e。 100%) 、列は最大ラジアンを有し、円形である。
  テキストパディング	水平方向の間隔は、テキストと円弧列の時間をpx単位で開始します。

• グラデーションオプション: 縦棒グラフの曲線列の色。

  パラメーター	説明
  スタートカラー	円弧列の始点の色については、「カラーピッカーの指示」をご参照ください。
  エンドカラー	湾曲した列の端の色。

• テキストスタイル: 縦棒グラフのテキストのスタイル。

  パラメーター	説明
  フォントファミリー	テキストのフォントファミリ。 デフォルト値: Microsoft Black
  フォントサイズ	テキストボックス内のテキストのフォントサイズ。
  フォントの色	テキストの色
  フォントの太さ	テキストフォントの重み。

• アニメーション: 縦棒グラフの各曲線列のアニメーション効果。 アイコンをクリックして、このアニメーション効果を使用するかどうかを制御できます。

  パラメーター	説明
  元の期間	コンポーネントが初めてレンダリングされたときのアニメーションの継続時間。 単位：ms。
  イージング	アニメーションのイージング効果。 オプションです。 システムはあなたがから選ぶために複数の共通の緩和効果を提供します。
  すべてのシリーズのアニメーション	スイッチをオンにすると、アークの各シリーズがアニメーションを順番に再生します。スイッチをオフにすると、すべてのアークが同時にアニメーションを再生します。
  データ更新の期間	ウィジェットデータが更新されたときのアニメーションの継続時間。 単位：ms。
  最新ステータスから更新	スイッチをオンにしてウィジェットデータが更新されると、アニメーションは前のデータの位置から開始されます。 スイッチをオフにしてウィジェットデータを更新すると、アニメーションは初期位置から開始されます。

データパネル

設定フィールドの説明

相互作用パネル

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

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

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

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

3. Blueprint Editorで、[追加したノード] ペインで [放射状棒グラフ] をクリックします。 次の図に示すように、キャンバスで放射状の縦棒グラフパラメーターを表示できます。

   • イベント

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

   • Action

     Action	説明
     リクエストチャートインターフェイス	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttps:// api.testで、要求アーク列チャートインターフェイスに渡されるデータが { id: '1'} で構成されている場合、最終的な要求インターフェイスはhttps:// api.test?id=1です。
     インポートチャートインターフェイス	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     ウィジェット設定の更新	ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、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" } }