ドーナツグラフウィジェットを使用すると、円グラフのスタイル、さまざまなデータディメンションの表示、さまざまなカテゴリの割合、および必要に応じてその他のオプションをカスタマイズできます。
スタイル
- 基本属性
- Size:幅と高さを調整して、ウィジェットのサイズを設定します。
- Position:横座標と縦座標を調整して、ウィジェットの位置を設定します。
- Others:ウィジェットの回転角度と不透明度を設定します。
- フォントファミリ: 表示されるテキストのフォントを設定するには、ドロップダウン矢印をクリックして目的のフォントを選択します。 デフォルトのフォントは Microsoft YaHei です。
- 外枠の色: 外枠の枠の色を変更するには、「カラーピッカー」をご参照ください。
- ラベル
- ラベルから中心までの距離: ラベルとグラフの中心の間の水平距離を変更するには、値を入力するかスライダをドラッグします。 値の範囲は 0 から 1 です。
- 頂点から中心までの距離: 頂点とチャートの中心間の距離を変更するには、値を入力するかスライダをドラッグします。 値の範囲は 0 から 1 です。 値が小さすぎると、頂点はチャートの中心で重なります。
- カテゴリ: カテゴリを表示するには、 目アイコンをクリックします。
- フォントサイズ: カテゴリテキストのフォントサイズを設定するには、値を入力するか、 [+] または [-] をクリックします。
- 色: カテゴリテキストのフォントの色を変更するには、「カラーピッカー」をご参照ください。
- フォントの太さ: カテゴリテキストのフォントの太さを設定するには、ドロップダウン矢印をクリックして目的のフォントの太さを選択します。
- 値
- フォントサイズ: パーセント値のフォントサイズを設定するには、値を入力するか、 [+] または [-] をクリックします。
- 色: パーセント値のフォントの色を変更するには、「カラーピッカー」をご参照ください。
- 小数点以下の桁数: 小数点以下の桁数を設定するには、値を入力するか、 [+] または [-] をクリックします。
- フォントの太さ: パーセント値のフォントの太さを設定するには、ドロップダウン矢印をクリックして目的のフォントを選択します。
- 実際の値: このオプションをオンにすると、実際のデータ値が表示されます。 このオプションをオフにすると、パーセント値が表示されます。
- 円
- 半径: グラフの中心と外側の円の間の距離を変更するには、値を入力するかスライダをドラッグします。 値の範囲は 0 から 1 です。
- 同心性の線: 同心性の線を表示するには、目アイコンをクリックします。
- 色: 同心性の線の色を変更するには、 「カラーピッカー」をご参照ください。
- 凡例: 凡例項目を表示するには、 目アイコンをクリックします。
- テキストスタイル
- フォントサイズ: 凡例のテキストのフォントサイズを設定するには、値を入力するか、 [+] または [-] をクリックします。
- フォントの色: 凡例のフォントの色を変更するには、「カラーピッカー」をご参照ください。
- フォントの太さ: 凡例のテキストのフォントの太さを設定するには、ドロップダウン矢印をクリックして目的のフォントの太さを選択します。
- レイアウト / マージン
- 水平間隔: 凡例項目間の水平距離を変更するには、値を入力するか、 [+] または [-] をクリックします。
- 垂直間隔: 凡例項目間の垂直距離を変更するには、値を入力するか、 [+] または [-] をクリックします。
- 位置: 凡例項目の位置を設定するには、ドロップダウン矢印をクリックして目的の位置を選択します。
- 上部中央
- 左上
- 右上
- 下部中央
- 左下
- 右下
- テキストスタイル
- シリーズ: シリーズを追加または削除するには、 [+] または ゴミ箱アイコンをクリックします。
- 色: シリーズに対応するセグメントの色を設定するには、ドロップダウン矢印をクリックしてターゲットの色を選択します。
- 塗りつぶし
- グラデーション塗りつぶし: グラデーションカラーとして 2 色を選択できます。
- グラデーション角度を変更するには、値を入力するか、スライダをドラッグします。 値の範囲は、0 から 360 です。
- 内半径: セグメントの内半径の長さを変更するには、値を入力するか、スライダをドラッグします。 値の範囲は 0 から 1 です。
- 外半径: セグメントの外半径の長さを変更するには、値を入力するか、スライダをドラッグします。 値の範囲は 0 から 1 です。
- 色: シリーズに対応するセグメントの色を設定するには、ドロップダウン矢印をクリックしてターゲットの色を選択します。
- アニメーション: アニメーションオプションを表示するには、 目アイコンをクリックしてください。
- 元の期間: ウィジェットが最初にアニメーションをレンダリングする期間を変更するには、値を入力するか、 [+] または [-] をクリックします。 単位はミリ秒です。
- 円グラフのすべてのセクターをリセット: このオプションをオンにすると、円グラフの各セグメントのアニメーションが順番に表示されます。 このオプションをオフにすると、円グラフの各セグメントのアニメーションが同時に表示されます。
- イージング: アニメーションイージングを設定するには、ドロップダウン矢印をクリックして目的の効果を選択します。
- 連続した全シリーズのアニメーション: このオプションをオンにすると、円グラフのすべてのセグメントのアニメーションが順番に表示されます。 このオプションをオフにすると、円グラフのすべてのセグメントのアニメーションが同時に表示されます。
- データアップデートの期間: データが変更になったときのアニメーション期間を変更するには、値を入力するか、 [+] または [-] をクリックします。 単位はミリ秒です。
- 最新の状態から更新: このオプションをオンにすると、アニメーションはデータが変更されたセグメントから始まります。 このオプションをオフにすると、アニメーションは開始点から始まります。
データ
- x: シリーズの名前
- y: シリーズの実際のデータ値。 このフィールドの値は、セグメントのパーセント値を決定します。
インタラクション
このウィジェットはまだイベントに接続されていません。