DataV:パーセントバーチャート

チャートスタイル

パーセンテージ棒グラフは、数値を水平列の長さで比較します。 分類されたデータの1つ以上のグループを比較するのに適しています。 データセット内のフィールドデータを選択し、データマッピングスタイルを設定できます。

スタイルパネル

• 検索設定: スタイルパネルの右上隅にある検索設定項目アイコンをクリックします。 [検索設定] パネルで、検索する設定項目の名前を入力し、設定項目を検索します。 あいまい一致はサポートされていません。 詳細については、「設定項目の検索」をご参照ください。

• Size: ウィジェットの幅と高さ。 単位: ピクセル。

• ポジショニング: コンポーネントのx軸とy軸。 単位: ピクセル。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。

• 回転: ウィジェットはウィジェットの中心を中心に回転します。 単位は度で、

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

  • アイコンをクリックして、ウィジェットスタイルを反転します。

  • アイコンをクリックして、ウィジェットスタイルを反転します。

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

• グラフィック

  パラメーター	説明
  チャートマージン	アイコンをクリックして、チャートの余白の表示を制御します。 スイッチをオンにすると、縦棒グラフ領域とウィジェットの4つの境界の間の距離を設定できます。 単位: デフォルトでpx。
  列の幅	列の幅 (px単位) 。 アイコンをクリックして、列の幅の設定項目を制御します。
  列の色	列の色。 詳細については、「カラーマッパーの使用」をご参照ください。
  柱の輝き	列の照明スタイル。 アイコンをクリックして、列の照明設定項目の表示と隠蔽を制御します。 明るい色: 同期された列の切り替えと不透明度が含まれます。 同期列のスイッチをオフにすると、発光色を個別に設定できます。 あいまい係数: 列ライトのあいまい係数を設定します。 有効値：0 〜 50 です。 値が大きいほど、列間の光の範囲があいまいになります。 シャドウオフセット: 列ライトの水平方向と垂直方向のシャドウオフセットを指定します。 デフォルト値はpxです。
  列ラベル	列のラベルスタイル。 アイコンをクリックして、ラベル設定項目の表示を制御します。 ラベルフィールド: ラベルフィールドの内容は、[データ] タブのフィールドの内容と一致する必要があります。 デフォルトでは、xフィールドの内容が取得されます。 接頭辞: 列タグの接頭辞と接尾辞。 ラベルの位置: ラベルの内容の位置を選択します。 [トップ] 、[ミドル] 、または [ボトム] を選択できます。 相対オフセット: 列ラベルの垂直方向と水平方向のオフセット。 単位: ピクセル。 テキストスタイル: 列タグのテキストスタイル (テキストのフォントスタイル、太さ、フォントサイズ、色など) 。 テキストストローク: 線の太さと色を含む、列の線のスタイル。
  地図	列のマップスタイル。 アイコンをクリックして、マップ設定項目の視覚化を制御します。 説明 マップの背景はグラデーションカラーをサポートしていません。 Type: ステッカーのタイプ。 有効な値: Point、Line、Square、Image。 塗りつぶしスタイル: テクスチャマップの塗りつぶしスタイル。 マップのカラースタイルを設定するには、カラーピッカーの手順を参照してください。 線のスタイル: マップの線のスタイルを指定します。 マップのカラースタイルを設定するには、カラーピッカーの手順を参照してください。 このパラメーターは、タイプをドットまたはスクエアに設定したときに表示されます。 追加スタイル: グラフィックサイズ、グラフィック間隔、行間、回転角度、スタッガーなど、マップのその他のスタイル。 [タイプ] を [イメージ] に設定すると、[イメージアドレス] 、[タイルの幅] 、[タイルの高さ] 、[タイルの間隔] 、[回転角度] の設定を行うことができます。

• 座標: ウィジェットのx軸とY軸。

  • X軸

    • x軸表示: スイッチをオンにすると、ウィジェットのx軸スタイルが表示されます。 スイッチをオフにすると、ウィジェットのx軸スタイルは表示されません。

    • 軸: 線の形状、太さ、色など、縦棒グラフのx軸のスタイル。 アイコンをクリックして、x軸のスタイルを表示または非表示にできます。

      説明

      線の種類が点線または点線として選択されている場合、線の切れ目の長さの値と各切れ目の間の距離も設定できます。

    • 軸タイトル: 縦棒グラフのx軸のタイトルスタイル。 アイコンをクリックすると、x軸のタイトルの表示を制御できます。

      パラメーター	説明
      タイトル表示	軸タイトル表示のテキストコンテンツ。
      表示モード	タイトルの角度値とタイトルのオフセット値を含む、軸タイトルの表示モード。
      テキストスタイル	軸タイトルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。

    • 軸ラベル: 縦棒グラフのx軸のラベルスタイル。 アイコンをクリックして、x軸の軸ラベルの表示を制御できます。

      パラメーター	説明
      表示形式	ラベル値の表示形式のスタイルをx軸にします。 [デフォルト] 、11 (整数) 、11.1 (浮動小数点) 、11.11 (浮動小数点) 、11% (パーセンテージ) 、11.1% (パーセンテージ) 、1,111 (数千区切り) 、および1,111.1 (数千区切り) を選択できます。 データ表示形式の詳細については、「データ表示形式」をご参照ください。
      終了間隔	x軸ラベルと軸の両端との間の距離 (%) 。
      ラベル表示	軸ラベルの予想ティック数、ラベルのプレフィックスとサフィックス、ラベルの角度値、オフセット、ラベルの配置など、ラベルの表示スタイル。
      テキストスタイル	軸ラベルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。

    • 目盛りマーク: 目盛りの長さ、太さ、色を含む、縦棒グラフのx軸目盛りのスタイル。 アイコンをクリックして、x軸の目盛りのスタイルを制御できます。

    • グリッド線: グリッド線の線のスタイル、太さ、色、長さ、および間隔の値を含む、縦グラフのx軸グリッド線のスタイル。 アイコンをクリックすると、x軸グリッド線の表示を制御できます。

      説明

      線の種類が点線または点線として選択されている場合、線の切れ目の長さの値と各切れ目の間の距離も設定できます。

  • Y軸

    • Y軸表示: スイッチをオンにすると、ウィジェットのY軸表示が表示されます。 スイッチをオフにすると、ウィジェットのY軸表示が見えなくなります。

    • データ型: y軸のデータ型。 有効な値: Numeric、Category、およびTime。

    • 表示範囲: Y軸の最小値と最大値の表示範囲。 このパラメーターは、[数値] 設定項目 [データ型] を選択した場合にのみ使用できます。

      パラメーター	説明
      最小実行時間	y軸の最小値。 カスタム値を指定できます。 [最小値] を選択して、データの最小値を取得することもできます。
      最大ランタイム期間	y軸の最大値。 カスタム値を指定できます。 [最大データ値] を選択して、データの最大値を取得することもできます。

    • 軸: 線の種類、線の太さ、線のスタイルなど、縦棒グラフのY軸のスタイル。 アイコンをクリックして、Y軸スタイルを表示するか非表示にするかを制御できます。

      説明

      線の種類が点線または点線として選択されている場合、線の切れ目の長さの値と各切れ目の間の距離も設定できます。

    • 軸タイトル: y軸タイトルの縦棒グラフスタイル。 アイコンをクリックして、y軸のタイトルを表示するかどうかを制御できます。

      パラメーター	説明
      タイトル表示	軸タイトル表示のテキストコンテンツ。
      表示モード	タイトルの角度値とタイトルのオフセット値を含む、軸タイトルの表示モード。
      テキストスタイル	軸タイトルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。

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

      パラメーター	説明
      表示形式	Y軸ラベル値の表示形式。 [デフォルト] 、11 (整数) 、11.1 (浮動小数点) 、11.11 (浮動小数点) 、11% (パーセンテージ) 、11.1% (パーセンテージ) 、1,111 (数千区切り) 、1,111.1 (数千区切り) を選択できます。 データ表示形式の詳細については、「データ表示形式」をご参照ください。 このパラメーターは、[データ型] パラメーターを [数値] に設定した場合にのみ使用できます。
      終了間隔	Y軸ラベルの両端の軸からの距離 (%) 。
      ラベル表示	軸ラベルの数、ラベルの接頭辞と接尾辞、ラベルの角度値、オフセット、ラベルの配置など、ラベルの表示スタイル。
      テキストスタイル	軸ラベルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。

    • 目盛りマーク: 目盛りの長さ、太さ、色など、Y軸の目盛りのスタイルを縦棒グラフにします。 アイコンをクリックすると、チェックマークのスタイルを表示または非表示にできます。

    • グリッド線: グリッド線の線のスタイル、太さ、色、長さ、および間隔の値を含む、縦軸のグリッド線のスタイル。 アイコンをクリックすると、グリッド線の表示または非表示を制御できます。

      説明

      線の種類が点線または点線として選択されている場合、線の切れ目の長さの値と各切れ目の間の距離も設定できます。

• アニメーション: パーセンテージ棒グラフのアニメーション効果スタイル。

  • アニメーション: 現在のチャートのアニメーションスタイルを設定します。 アイコンをクリックして、アニメーションの外観または隠蔽を制御します。

    • アニメーションエフェクト: アニメーションエフェクトのタイプ。 このシステムでは、ズーム、移動、水平成長、垂直成長など、さまざまな一般的なアニメーション効果を選択できます。

    • アニメーション期間: コンポーネントのアニメーション効果の期間。 単位：ms。

  • スイープアニメーション: 現在のチャートのスイープアニメーションスタイルを設定します。 アイコンをクリックして、スイープアニメーションの表示または隠蔽を制御します。

    重要

    現在のアニメーションを有効にすると、[Selected] などのインタラクティブ機能は無効になります。

    • ハイライトスタイル: ライトスイープアニメーションのハイライトの高さと強度を設定できます。

    • 動的効果: スイープアニメーションのアニメーション時間とギャップを設定します。 単位：ms。

• Interactive: パーセント棒グラフウィジェットのインタラクティブ効果スタイル。

  • カルーセル: カルーセル機能を有効にすると、ダイアログボックスの設定が適用され、ダイアログボックスはインタラクションによってトリガーされなくなります。 アイコンをクリックして、カルーセル効果を表示または非表示にします。

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

    パラメーター	説明
    トリガー	ダイアログボックスがトリガーされるメソッド。 [ホバー] または [クリック] を選択できます。
    表示位置	ダイアログボックス表示の位置スタイル。 有効な値: Up、Down、Left、Right。
    タイトルの間隔	ダイアログボックス内のタイトルの間隔。 単位: ピクセル
    タイトルテキスト	ダイアログボックス内のタイトルテキストのスタイル (フォントスタイル、テキストの太さ、フォントサイズ、色など) 。
    コンテンツの間隔	ダイアログボックスのコンテンツのテキスト間の間隔。 単位: ピクセル
    コンテンツテキスト	ダイアログボックス内のコンテンツテキストのスタイル (フォントスタイル、テキストの太さ、フォントサイズ、色など) 。
    ポップアップ背景	ダイアログボックスのポップアップ背景スタイル。 背景余白: ポップアップ背景の水平および垂直の余白をダイアログボックスに表示します。 背景色: ダイアログボックスの背景色。 枠のスタイル: 枠線の種類、角の丸めサイズ、線幅サイズ、枠線の色など、枠線のスタイルをダイアログボックスに表示します。
    軸インジケータ	軸インジケーターのタイプ、太さの値、軸インジケーターの色など、ダイアログボックスの軸インジケーターのスタイル。 アイコンをクリックして、軸インジケーターをオンまたはオフにします。 説明 線の種類が点線または点線として選択されている場合、線の切れ目の長さの値と各切れ目の間の距離も設定できます。
    範囲の有効化	領域スタイルの塗りつぶしの色、透明度、幅調整の追加値を含む、アクティブな領域のスタイルをダイアログボックスに表示します。

  • 接続領域: 異なるカテゴリの列と同じ一連のデータ間の接続領域のスタイル。 ホバリングまたはクリックによってトリガーできます。 アイコンをクリックして、接続エリア設定アイテムの表示を制御します。

  • 選択済み: 選択した列。 アイコンをクリックして、選択した列を有効または無効にできます。

    重要

    [アニメーションのスイープ] 機能が有効になっている場合、選択した機能は無効になります。

    パラメーター	説明
    トリガー	選択した列のトリガーモード。 このパラメーターは、[Hover] および [Click] などのオプションです。
    メソッドの選択	列の選択モード。 有効な値: SingleおよびMultiple。 [単一選択] を選択した場合、クリックイベントは1つのデータのみをスローします。 データ形式はオブジェクトであり、強調表示できる列は1つだけです。 [複数選択] を選択した場合、clickイベントは複数のデータをスローします。 データ形式は配列で、複数の列を強調表示できます。
    列の色	選択状態の列の色。
    柱ストローク	列の線のスタイル (線の種類、線の太さ、線の色など) 。 説明 線の種類が点線または点線として選択されている場合、線の切れ目の長さの値と各切れ目の間の距離も設定できます。

  • インタラクティブな強化: パーセント棒グラフに含まれるデータが多すぎる場合は、インタラクティブな強化スタイルを設定できます。 アイコンをクリックすると、インタラクティブな強化効果を有効または無効にできます。

    重要

    Sweep Animationが有効になっている場合、インタラクション強化機能は無効になります。

    パラメーター	説明
    コマンドの実行方法	データの相互作用のモード。 有効な値: サムネイル軸およびスクロールバー。 説明 timeデータ型。 この機能を使用して大量のデータを操作することはできません。
    デフォルトの範囲	サムネイル軸に表示されるデータの範囲。 範囲は0〜1であり得る。 このオプションは、サムネイル軸スタイルがオンになっている場合にのみ表示されます。
    レールスタイル	スライドの高さの値、スライドの前景色、背景色など、サムネイル軸スライドのスタイル。 このオプションは、サムネイル軸スタイルがオンになっている場合にのみ表示されます。
    テキストスタイル	フォントの内容、テキストの太さ、フォントサイズ、テキストの色など、サムネイル軸上のテキストのスタイル。 このオプションは、サムネイル軸スタイルがオンになっている場合にのみ表示されます。
    ハンドルスタイル	ハンドルの幅と高さの値、ハンドルの背景のデフォルトの色とハイライトの色、ハンドルエッジのコーナーの値、エッジの色を含む、サムネイルシャフトの両端のハンドルスタイル。 説明 このオプションは、サムネイルスタイルが有効な場合にのみ使用できます。
    ローラー幅	スクロールバーの幅。 単位: ピクセル。 説明 このオプションは、スクロールバースタイルが有効な場合にのみ使用できます。
    ロールバーの色	スクロールバーの前景色と背景色を含む、スクロールバーの色。 説明 このオプションは、スクロールバースタイルが有効な場合にのみ使用できます。

• 凡例: パーセント棒グラフの凡例スタイル。

  パラメーター	説明
  凡例スイッチ	スイッチをオンにすると、凡例のスタイルを設定できます。 スイッチをオフにすると、凡例スタイルを設定できません。
  凡例の位置	ウィジェットの開始座標に対する凡例の相対位置。 Valids: Top Left、Top Center、Top Right、Bottom Left、Bottom Center、Bottom Right、Left Top、Left Center、Left Bottom、Right Top、Right Center、Right Bottom。
  テキストスタイル	凡例テキストのフォントスタイル、テキストの太さ、フォントサイズ、色。
  カテゴリの凡例	サブタイプの凡例のスタイル。 コンポーネントタイプの凡例は、コンポーネントスタイルパネルで [グラフィック列のカラーマッピングタイプ] フィールドが [名詞分類] に設定されている場合にのみ表示されます。 凡例マーカー: 凡例マーカーのサイズと形状。 凡例の間隔: 異なるカテゴリの凡例間の水平方向と垂直方向の距離。 最大幅: 凡例の最大幅。 単位: ピクセル。 ページ反転許可: スイッチをオンにすると、凡例のページ番号スタイルと矢印スタイルが有効になります。 スイッチをオフにすると、凡例のコンテンツが1ページに表示され、反転できません。 ページスタイル: ページ番号のフォント、太さ、フォントサイズ、色など、ページ番号のスタイル。 矢印スタイル: ページめくりスタイルの矢印のサイズ、デフォルトの色、および無効な色。

• Dimension: ディメンションスタイルの説明です。

  • 補助線: 右側のまたはアイコンをクリックして、補助線シリーズを追加または削除します。 またはアイコンをクリックして、複数のガイドラインシリーズの配置スタイルを設定します。 アイコンをクリックして、現在選択されている補助線シリーズ構成をコピーし、同じ構成の補助線シリーズを追加します。

    • Type: 水平線とスラッシュを含む補助線のタイプ。

    • データ値: 平均線、中央線、最大線、最小線を含む補助線のデータ値。

    • Linetype Style: 補助線のlinetype、太さ、長さ、間隔、および色を含む、補助線のlinetypeスタイル。

    • Text: テキスト、データ表示スイッチ、回転角度、水平および垂直オフセット、配置位置など、ガイドラインのコンテンツスタイルを指定します。

    • テキストの背景: 背景の色と丸みを帯びた角の半径など、ガイドラインの背景を指定します。

    • テキストスタイル: ガイドラインのテキストスタイル。

  • 補助フレーム: またはアイコンをクリックして、補助フレームシリーズを追加または削除します。 またはアイコンをクリックして、複数の補助フレームシリーズの配置スタイルを設定します。 アイコンをクリックして補助フレームシリーズ設定をコピーし、同じ設定の補助フレームシリーズを追加します。

    • End Point Position: 補助フレームの開始時間の水平 /y軸と終点の水平 /y軸を設定します。

    • 背景塗りつぶし: 補助フレームの背景色を設定します。

    • 線のスタイル: 補助フレームの線の種類、重さ、長さ、間隔、色など、補助フレームの線のスタイル。

    • エリアカラーリング: 補助フレームシリーズのエリアカラーリング値を設定します。 [Sweep Animation] または [Column Background Color] をオンにすると、このパラメーターは無効になります。

    • テキスト: テキスト、水平と垂直のオフセット、回転角度、表示位置など、補助フレームのコンテンツスタイルを設定します。

    • テキストの背景: 補助フレームの背景を設定します。背景の色と丸みを帯びた角の半径を含みます。

    • テキストスタイル: 補助フレームのテキストスタイル。

  • 列スタイル: またはアイコンをクリックして、条件付きスタイルを追加または削除します。 またはアイコンをクリックして、複数の条件付きスタイルの配置スタイルを設定します。 アイコンをクリックして現在の条件付きスタイル設定をコピーし、同じ設定の条件付きスタイルを追加します。 条件パターンの設定方法の詳細については、「条件ツリーの使用」をご参照ください。

    • 列の色: スイッチをオンにすると、条件スタイルで列の色を設定できません。 スイッチをオフにすると、条件スタイルで列の色を設定できません。

    • テキストラベリング: 現在の条件下でのテキストラベリングのスタイル。

      • テキストコンテンツ: テキスト注釈の内容を指定します。

      • オフセット: テキスト注釈の水平方向と垂直方向のオフセット。 単位: ピクセル。

      • Orientation: テキスト注釈ポイントに対するテキスト注釈の方向 (top、right、bottom、left) 。

      • テキストの背景: テキスト注釈の背景を指定します。背景の色や角の丸みの半径などです。

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

      • テキスト行: 行の種類、色、太さ、長さなど、テキスト注釈の行スタイルを指定します。

      • テキストラベルポイント: テキストラベルポイントの塗りつぶしの色と半径を設定します。

        説明

        線のスタイルは線のスタイルと同じです。

[データソース] パネル

高度なパネル

Blueprintインタラクション

1. 左上隅のアイコンをクリックして、ブループリントページに移動します。

2. [レイヤーノード] タブで、ウィジェットをメインキャンバスに追加します。

3. ブループリント設定パラメーターを参照してください。

   • イベント

     イベント	説明
     パーセント棒グラフインターフェイス要求が完了したとき	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データソース] タブの [データ応答結果] セクションをご参照ください。
     データ項目が選択されている場合	パーセント棒グラフのバーがクリックされたときに発生するイベントと、バーに対応するデータ項目。
     凡例がクリックされたとき	パーセント棒グラフの凡例がクリックされたときに発生するイベントと、その棒グラフに対応するデータ項目。

   • Action

     Action	説明
     インポート率バーチャート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データソース] タブの [データ応答結果] セクションをご参照ください。
     リクエスト率棒グラフインターフェイス	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttps:// api.testに設定され、[Request Percentage Bar Chart] インターフェイスに転送されるデータが { id: '1'} に設定されている場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1になります。
     ハイライト	data: 強調表示されるデータ項目。 シングルハイライト { x: 'Shanghai', y: 100 } バルクハイライト [ { x: 'Shanghai', y: 100}, { x: 'Shenzhen', y: 75 } ] style: スタイルを選択します。 fillStyle、ストローク、不透明度など。 ハイライトスタイルを指定しない場合は、デフォルトのスタイルが使用されます。 参照データの例 { "data": {}, "style": {} }
     選択のリセット	リセットコンポーネントの選択項目データを消去します。 パラメータは必要ありません。
     移動	ウィジェットを指定した場所に移動します。 詳細については、データ例をご参照ください。 { // 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 animation delay. Unit: milliseconds. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     スイッチ表示 /非表示	ウィジェットを表示するか非表示にするかを指定します。 パラメータは必要ありません。
     表示	ウィジェットを表示します。 詳細については、「データ例」をご参照ください。 { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     非表示	コンポーネントを非表示にします。 詳細については、「データ例」をご参照ください。 { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。 スタイルパネルで、[設定をクリップボードにコピー] をクリックしてウィジェットの設定データを取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。