DataV:進行状況ドーナツチャート (爆発) ウィジェット

チャートスタイル

進行状況ドーナツチャート (分解) は、予想される目標に対する現在のメトリックの割合または現在のメトリックの実際の値を表示する円グラフです。 ただし、メトリック値とターゲット値の両方の表示はサポートされていません。 現在のメトリックの完了ステータスを表示するのに適しており、マルチシリーズデータ構成はサポートしていません。

設定パネル

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

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

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

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

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

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

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

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

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

• フォントファミリ: 円グラフ内のすべてのテキストのフォントファミリ。 デフォルト値: Microsoft Yahei

• マージン

  パラメーター	説明
  トップ	円グラフとウィジェットの上部境界の間の距離。
  ボトム	円グラフとウィジェットの下部境界の間の距離。
  左	円グラフとウィジェットの左境界の距離。
  正しい	円グラフとウィジェットの右枠の間の距離。

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

  パラメーター	説明
  フォントサイズ	値のサイズ。
  フォントの色	値の色。
  フォントの太さ	数値テキストの太さ。
  小数点以下の場所	値に表示する小数点以下の桁数。
  本当の価値	データの特定の値を表示するにはスイッチをオンにします。データのパーセント値を表示するにはスイッチをオフにします。

• セクター: 円グラフのファンタイプ。

  パラメーター	説明
  タイトル	円グラフの下に表示されるテキストタイトル。
  カラー	タイトルの色。 詳細については、「カラーピッカーの手順」をご参照ください。
  背景色	ファンの下の背景リングの色を示します。
  余分な色	境界外リングの色。 進行状況が目標よりも大きい場合、範囲外のリングの円が表示されます。
  インナー半径	セクターの半径。 有効な値は 0～1 です。 値が小さすぎると、内輪が覆われます。

• インナーサークル: 一般的にリング全体であるインナーリングのスタイル。

  パラメーター	説明
  カラー	内侧のリングの色。
  外半径	内部リングの外の半径のサイズの比率。 有効な値は 0～1 です。
  インナー半径	内部リングの内部の半径のサイズの比率。 有効な値は 0～1 です。

• グラデーションオプション: 極軸のスタイル。

  同心線: 極軸ネットワークラインのスタイル。 アイコンをクリックすると、ネットワーク回線を表示または非表示にできます。

  色: 極軸線の色。

• 角度軸

  角度オフセット: セクターの開始オフセット角度。 デフォルト値はautoで、オフセット値が0であることを示します。

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

  • Text: 凡例のテキストスタイル。

    パラメーター	説明
    フォントサイズ	凡例テキストのサイズ。
    フォントの色	凡例のテキストの色。
    フォントの太さ	凡例テキストのフォントの太さ。

  • レイアウト

    • マージン: 凡例の間隔スタイル。

      パラメーター	説明
      水平インターバル	隣接する凡例の左側と右側の間の距離。 この設定項目は、複数のシリーズがある場合にのみ有効です。
      垂直インターバル	凡例とウィジェットの上下の境界との間の距離。

    • 位置: ウィジェットの開始座標に対する凡例の位置。 [Top Center] 、[Top Center] 、[Top Right] 、[Bottom Center] 、[Bottom Left] 、または [Bottom Right] を選択できます。

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

  パラメーター	説明
  元の期間	コンポーネントによってレンダリングされる最初のアニメーションの期間。 単位：ms。
  イージング	アニメーションの緩和効果。 このシステムは、さまざまな共通の緩和効果を提供します。
  データ更新の期間	ウィジェットデータが更新されたときのアニメーションの継続時間。 単位：ms。
  最新ステータスから更新	スイッチがオンになっている場合、ウィジェットは前のデータの位置から開始します。 スイッチがオフになっている場合、ウィジェットは0の位置から開始します。

データパネル

設定フィールドの説明

相互作用パネル

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

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

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

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

3. Blueprint Editorで、[追加されたノード] ペインで [進行状況ドーナツチャート (爆発)] をクリックします。 次の図に示すように、キャンバスで進行状況ドーナツチャート (分解) パラメーターを表示できます。

   • イベント

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

   • Action

     Action	説明
     リクエストチャートインターフェイス	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、進行状況ドーナツチャート (展開) の場合、APIデータソースはhttp:// api.testとして設定され、リクエストチャートインターフェイスに転送されるデータは { id: '1'} です。最終的なリクエストインターフェイスはhttp:// 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" } }