DataV:Double 11 Percentage Pie Chartウィジェット

チャートスタイル

Double 11のパーセント円グラフは円グラフの一種です。 基本円グラフと比較して、Double 11のパーセンテージ円グラフは、Double 11ビジュアライゼーションアプリケーション用にカスタマイズされた円グラフウィジェットです。 グラフィックとテキストの組み合わせでDouble 11の販売状況を表示できます。 たとえば、Double 11のSuper Affiliateの割合を示します。

設定パネル

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

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

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

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

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

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

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

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

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

• グラフオプション

  パラメーター	説明
  外半径	円の中心からリングの外側までの距離。 値は、コンポーネントの高さのパーセンテージです。 有効な値は 0～1 です。
  インナー半径	円の中心からリングの内側までの距離。 値は、コンポーネントの高さのパーセンテージです。 有効な値は 0～1 です。
  サークルカラー	円グラフの最も外側の円の色。 詳細については、「カラーピッカーの説明」をご参照ください。
  サークル厚さ	円グラフの最も外側の円の太さ。

• グラデーションオプション

  パラメーター	説明
  アニメーション期間	ファンアニメーションの長さ。
  グラデーション範囲	ファンカラーのグラデーションタイプ。 オプション： 完全な円: グラデーションが円全体を埋めます。 Arc: グラデーションで円弧を塗りつぶします。
  カラー	グラデーションバンド内のさまざまな場所の色。 色を追加または削除するには、右側のまたはアイコンをクリックします。 またはアイコンをクリックして、複数の色の配置スタイルを設定します。 をクリックし、アイコンをクリックして、現在選択している色をコピーし、同じスタイルの新しい色を追加します。

• アイコン: 円グラフの中央にあるアイコンのスタイル。

  パラメーター	説明
  ファイル	イメージボックスの上にポインターを移動し、[削除] をクリックして、オンプレミスのコンピューターから新しいアイコンイメージをアップロードできます。 リモートサーバーでアイコンを使用する必要がある場合は、アイコンアドレスを入力して設定します。
  幅	アイコンの幅。 単位: ピクセル。
  高さ	アイコンの高さ。 単位: ピクセル。
  上のオフセット	中央領域の境界の上部からのアイコンのオフセット距離。 単位: ピクセル
  左オフセット	中央領域の境界からのアイコンの左オフセット距離。 単位: ピクセル

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

  • Text: タイトルのテキストコンテンツ。

  • テキストスタイル

    パラメーター	説明
    フォントファミリー	タイトルテキストのフォントファミリ。 デフォルト値: Microsoft YaHei
    フォントサイズ	タイトルテキストのサイズ。
    フォントの色	タイトルテキストの色。
    フォントの太さ	タイトルテキストの重み。
    上のオフセット	アイコンの上部からのタイトルテキストのオフセット距離。 単位: ピクセル
    左オフセット	中央領域の境界からのタイトルテキストの左オフセット距離。 単位: ピクセル

• パーセント: 円グラフの中央のパーセント値のスタイル。

  パラメーター	説明
  テキストボックスのサイズ	中央のコンテンツ領域の内側の半径の割合。 有効な値は 0～1 です。
  数字フォントサイズ	パーセンテージの数値テキストのサイズ。
  パーセント記号サイズ	パーセントテキストのサイズ。
  上のオフセット	タイトルの先頭からのパーセント値のオフセット距離。 単位: ピクセル
  小数点以下の場所	パーセント値に表示する小数点以下の桁数。 有効な値: 0 ~ 2。
  テキストスタイル	パーセント値のテキストスタイル。 フォントファミリ: パーセント値テキストのフォントファミリ。 デフォルト値はMicrosoft YaHeiです。 フォントの色: テキストの色。 フォントの太さ: テキストのフォントの太さ。

データパネル

value: 対応するパーセンテージの特定の値。 値は10進数です。 1は100% を示す。

相互作用パネル

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

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

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

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

3. Blueprint Editorで、[追加されたノード] ペインで [割合円グラフ-ダブル11] ウィジェットをクリックします。 キャンバスでは、次の図に示すように、Double 11 Percentage円グラフのパラメーターを表示できます。

   • イベント

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

   • Action

     Action	説明
     要求データインタフェース	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttps:// api.testで、Request data Interfaceに渡されるデータが { 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" } }