DataV:ラジアル棒グラフ

チャートスタイル

翡翠チャートは、回転バーバーを使用してカテゴリデータを表示します。 Yujueの図表は分類されたデータの数値サイズを比較できます。 分類が多すぎる場合、ヒストグラムのテキストを合理的に配置するために回転させる必要がありますが、これは読書には役立ちません。 垂直ヒストグラムと比較して、Yujueチャートはそのような分類が多いシーンに適しています。

スタイルパネル

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

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

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

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

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

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

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

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

• グラフィック

  パラメーター	説明
  チャートマージン	アイコンをクリックして、チャートの余白の表示を制御します。 スイッチをオンにした後、Jadeマップエリアとウィジェットの4つの境界の間の距離を設定できます。 単位: デフォルトでpx。
  最大ラジアン	翡翠チャートの円弧列の最大ラジアン。 有効な値は 0～360 です。 単位は度で、
  アーク形状	翡翠チャートの曲線列の円弧スタイル。 直角と角丸を選択できます。
  アーク幅	翡翠チャートの円弧列の円弧幅の値 (px単位) 。
  アークカラー	円弧列チャートの色の詳細については、「カラーマッパーの説明」をご参照ください。 マッピングされた色は、さまざまなアーク棒グラフに設定できます。
  背景色	アークの棒グラフの背景色。
  アークストローク	円弧列チャートのストロークのタイプ、太さ、色を含む、円弧列チャートのストロークのスタイル。 説明 線の種類が点線または点線として選択されている場合、線の切れ目の長さの値と各切れ目の間の距離も設定できます。
  アークの輝き	アーク照明スタイル。 アイコンをクリックして、アーク照明設定項目の表示を制御します。 明るい色: 次のアークスイッチと不透明度が含まれます。 続くアークスイッチが消えるとき、明るい色は別に置くことができます。 ぼかし係数: 円弧状のグローのぼかし係数。 有効値：0 〜 50 です。 値が大きいほど、アーク間のグロー範囲はぼやけている。
  アークラベル	円弧棒グラフのラベルスタイル。 アイコンをクリックして、アークラベル設定項目の表示を制御します。 ラベルフィールド: ラベルフィールドの内容は、[データ] タブのフィールドの内容と一致する必要があります。 デフォルトでは、tフィールドの内容が取得されます。 値の形式: タグの値の形式を指定します。 有効な値: Default、11 (整数) 、11.1 (浮動小数点) 、11.11 (浮動小数点) 、11% (パーセンテージ) 、11.1% (パーセンテージ) 、1,111 (数千区切り) 、1,111.1 (数千区切り) 。 その他のデータ表示形式については、「データ表示形式の説明」をご参照ください。 このパラメーターは、ラベルフィールドでtを選択した場合にのみ表示されます。 接頭辞: 列タグの接頭辞と接尾辞。 相対オフセット: ウィジェットに対する円弧ラベルの垂直方向と水平方向のオフセット。 単位: ピクセル。 テキストスタイル: テキストのフォントスタイル、太さ、フォントサイズ、色など、曲線ラベルのテキストスタイル。 テキストストローク: 曲線ラベルのストロークスタイル (ストローク線の太さと色を含む) 。
  地図	列のマップスタイル。 アイコンをクリックして、マップ設定項目の視覚化を制御します。 説明 マップの背景はグラデーションカラーをサポートしていません。 Type: テクスチャのタイプ。 有効な値: Point、Line、Square。 塗りつぶしスタイル: テクスチャマップの塗りつぶしスタイル。 マップのカラースタイルを設定するには、カラーピッカーの手順を参照してください。 線のスタイル: マップの線のスタイルを指定します。 マップのカラースタイルを設定するには、カラーピッカーの手順を参照してください。 このパラメーターは、タイプをドットまたはスクエアに設定したときに表示されます。 追加スタイル: グラフィックサイズ、グラフィック間隔、行間、回転角度、スタッガーなど、マップのその他のスタイル。

• 座標: ウィジェットの半径軸。

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

  • データ型: 半径軸のデータ型 (カテゴリタイプ、時間タイプなど) 。

  • 半径範囲: 円弧バーの内側と外側の半径軸の値。 単位: % 。

  • Axis: 線の種類、線の太さ、線のスタイルなど、翡翠チャートの半径方向の軸のスタイル。 アイコンをクリックすると、ラジアル軸スタイルを表示するか非表示にするかを制御できます。

    説明

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

  • 軸タイトル: 翡翠チャートの半径軸のタイトルスタイル。 アイコンをクリックすると、半径軸タイトルの表示を制御できます。

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

  • 軸ラベル: 翡翠チャートの半径軸の軸ラベルスタイル。 アイコンをクリックすると、軸ラベルを表示するか非表示にするかを制御できます。

    パラメーター	説明
    ラベル表示	軸ラベルの接頭辞と接尾辞、角度値、オフセット、ラベルの配置など、ラベルの表示スタイル。
    テキストスタイル	軸ラベルテキストのフォントスタイル、テキストの太さ、フォントサイズ、および色。

  • 目盛り: 目盛りの長さ、太さ、色を含む、翡翠チャートの半径軸の目盛りスタイル。 アイコンをクリックすると、半径軸の目盛りのスタイルが表示されます。

  • グリッド線: グリッド線の線スタイル、太さ、色、長さ、および間隔の値を含む、翡翠チャートの半径軸グリッド線のスタイル。 アイコンをクリックすると、半径軸グリッド線の表示を制御できます。

    説明

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

• アニメーション: 現在のチャートのアニメーション効果スタイル。

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

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

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

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

    重要

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

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

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

• Interactive: Jadeウィジェットのインタラクティブ効果スタイル。

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

  • ダイアログボックス: プレビューページまたは公開ページの上にポインターを移動するか、アークバーをクリックしたときに表示されるダイアログボックスのスタイル。 アイコンをクリックして、ダイアログボックスをオンまたはオフにすることができます。 共通モードは、例として使用される。

    パラメーター	説明
    モード	ダイアログボックスのパターン (オプション) には、简洁とユニバーサルが含まれます。
    トリガー	ダイアログボックスがトリガーされるメソッド。 [ホバー] または [クリック] を選択できます。
    表示位置	ダイアログボックス表示の位置スタイル。 有効な値: Top、Bottom、Left、Right。
    タイトルの間隔	ダイアログボックス内のタイトルの間隔。 単位: ピクセル
    タイトルテキスト	ダイアログボックス内のタイトルテキストのスタイル (フォントスタイル、テキストの太さ、フォントサイズ、色など) 。
    コンテンツ表示	右側のまたはアイコンをクリックして、ダイアログボックスのコンテンツシリーズを追加または削除します。 またはアイコンをクリックして、複数のダイアログボックスのコンテンツ表示シリーズの配置スタイルを設定します。 アイコンをクリックして、現在のダイアログボックスのコンテンツ表示シリーズ設定をコピーし、同じ設定のダイアログボックスのコンテンツ表示シリーズを追加します。 フィールド名: ダイアログボックスのコンテンツ内のフィールドの名前。 名前はデータパネルのフィールドと一致する必要があります。 表示名: ダイアログボックスのコンテンツの表示名。 接尾辞: ダイアログボックスの内容の接尾辞。
    コンテンツの間隔	ダイアログボックスのコンテンツのテキスト間の間隔。 単位: ピクセル
    コンテンツテキスト	ダイアログボックス内のコンテンツテキストのスタイル (フォントスタイル、テキストの太さ、フォントサイズ、色など) 。
    ポップアップ背景	ダイアログボックスのポップアップ背景スタイル。 背景余白: ポップアップ背景の水平および垂直の余白をダイアログボックスに表示します。 背景色: ダイアログボックスの背景色。 枠のスタイル: 枠線の種類、角の丸めサイズ、線幅サイズ、枠線の色など、枠線のスタイルをダイアログボックスに表示します。
    軸インジケータ	軸インジケーター線の種類、太さの値、軸インジケーター線の色など、ダイアログボックスの軸インジケーター線のスタイル。 アイコンをクリックして、軸インジケーターの表示を制御できます。 説明 線の種類が点線または点線として選択されている場合、線の切れ目の長さの値と各切れ目の間の距離も設定できます。
    範囲の有効化	領域スタイルの塗りつぶしの色、透明度、幅調整の追加値を含む、アクティブな領域のスタイルをダイアログボックスに表示します。

  • Selected: 選択されたときのアークバーのステータス。 アイコンをクリックすると、選択したステータスを有効または無効にできます。

    パラメーター	説明
    トリガー	アークバーをトリガーするために使用されるメソッド。 次のいずれかのオプションを選択できます。[移動] および [クリック] 。
    メソッドの選択	アークバーの選択に使用されるメソッド。 [単一] または [複数] を選択できます。
    アークカラー	選択状態のアークバーの色。
    アークストローク	円弧バーのストロークスタイル (ストロークタイプ、線の太さ、ストロークの色など) 。 説明 線の種類が点線または点線として選択されている場合、線の切れ目の長さの値と各切れ目の間の距離も設定できます。

• 凡例: 翡翠チャートの凡例スタイル。

  パラメーター	説明
  凡例スイッチ	スイッチをオンにすると、凡例のスタイルを設定できます。 スイッチをオフにすると、凡例スタイルを設定できません。
  凡例の位置	ウィジェットの開始座標に対する凡例の相対位置。 有効な値: Top Left、Top Center、Top Right、Bottom Left、Bottom Center、Bottom Right、Left Top、Left Center、Left Bottom、Right Top、Right Center、Right Bottom。
  テキストスタイル	凡例テキストのフォントスタイル、テキストの太さ、フォントサイズ、色。
  チャート間隔	凡例とグラフの水平方向と垂直方向の間隔を設定します。 単位はpxです。
  カテゴリの凡例	サブタイプの凡例のスタイル。 コンポーネントタイプの凡例は、コンポーネントスタイルパネルで [Arc Color Mapping type] パラメーターが [Noun Classification] に設定されている場合にのみ表示されます。 凡例マーク: 凡例マークの形状とサイズ。 凡例の間隔: 異なるカテゴリの凡例間の水平方向の間隔と内側の間隔。 最大幅: さまざまなカテゴリの凡例の最大幅。 ページング許可: スイッチをオンにすると、ページの凡例をオンにできます。 凡例の数が多すぎる場合は、ページ番号スタイルと矢印スタイルを設定できます。 スイッチをオフにすると、凡例のコンテンツは1ページに表示され、めくることはできません。 スタイル: ページ番号のフォント、太さ、フォントサイズ、色など、ページ番号のスタイル。 矢印スタイル: ページめくりスタイルの矢印のサイズ、デフォルトの色、および無効な色。
  連続的な凡例	連続的な伝説のスタイル。 凡例は、コンポーネントスタイルパネルで [グラフィックアークカラーマッピングタイプ] パラメーターが [数値連続] または [数値パーティション] に設定されている場合にのみ、連続した凡例として表示されます。 レールスタイル Type: 凡例のスライドトラックのタイプ (RectangleやTriangleなど) 。 Length: 凡例スライドの長さ。 高さ: 凡例のスライドトラックの高さ。 背景色: 凡例トラックの背景色。 スライダースタイル: 凡例のスライドトラック上のスライダーのスタイル。 最小値: スライダーの最小値。 カスタム値を指定できます。 [自動] を選択して最小値を取得することもできます。 最大値: スライダーの最大値。 カスタム値を指定できます。 [自動] を選択して最大値を取得することもできます。 Size: スライダーのサイズ。 色: スライダーの色。 寸法スタイル: 凡例のテキスト寸法のスタイル。 配置: スライドトラックに対する凡例のテキスト寸法の配置 (上部配置、中央配置、下部配置など) 。 Spacing: 凡例のテキスト寸法とスライドの間の距離。

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

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

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

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

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

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

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

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

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

    • アークストローク: スイッチをオンにすると、線の種類、線の太さ、線の色など、条件スタイルシリーズのアークバーのストロークスタイルを設定できません。 スイッチをオフにすると、条件シリーズのアークバーのストロークスタイルを設定できません。

    • テキストコールアウト: アークシリーズのテキストコールアウトスタイル。

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

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

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

      • テキストの背景: テキスト注釈の背景。背景の色と丸みを帯びた角の半径を含みます。

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

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

      • テキストラベルポイント: テキストラベルのテキストラベルポイントのスタイル (塗りつぶしの色、半径、ストローク切り替えの必要性など) 。 ストロークスタイルは、テキスト行スタイルと同じです。

[データソース] パネル

高度なパネル

Blueprintインタラクション

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

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

3. ブループリント設定パラメータを表示します。

   • イベント

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

   • Action

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