DataV:Echarts極面チャート

チャートスタイル

設定パネル

• [設定の検索]: キャンバスエディターの右側のパネルで、[設定] タブをクリックし、右上隅の [設定の検索] をクリックします。 検索ボックスに必要な設定項目を入力し、検索アイコンをクリックして設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「設定の検索」をご参照ください。
• Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックすると、ウィジェットの幅と高さを比例調整できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。
• 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。
• 回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。
  • 回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。
  • アイコンの黒い点をドラッグします。
  • アイコンをクリックして、ウィジェットを水平に反転します。
  • アイコンをクリックして、ウィジェットを垂直に反転します。
• 不透明度: ウィジェットの不透明度。 有効な値: 0と1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1

• グリッド: 右側の目アイコンをクリックして、グリッドスタイルを表示します。

  • Left: グリッドとウィジェットの左枠の間の距離。 デフォルト値: 3% 次のタイプの入力がサポートされています。

    • 特定のピクセル値は、例えば、20である。

    • コンテナの高さと幅に対する割合 (20% など) 。

    • 左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。

  • 上: グリッドとウィジェットの上枠の間の距離。 デフォルト値: 60 次のタイプの入力がサポートされています。

    • 特定のピクセル値は、例えば、20である。

    • コンテナの高さと幅に対する割合 (20% など) 。

    • 左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。

  • Right: グリッドとウィジェットの右枠の間の距離。 デフォルト値: 4% 次のタイプの入力がサポートされています。

    • 特定のピクセル値は、例えば、20である。

    • コンテナの高さと幅に対する割合 (20% など) 。

    • 左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。

  • 下: グリッドとウィジェットの下の境界との間の距離。 デフォルト値: 3% 次のタイプの入力がサポートされています。

    • 特定のピクセル値は、例えば、20である。

    • コンテナの高さと幅に対する割合 (20% など) 。

    • 左、中央または右、コンポーネントは対応する位置に従って自動的に整列されます。

  • 幅: グリッドの幅。 デフォルト値: auto。 幅は適応的である。

  • 高さ: グリッドの高さ。 デフォルト値: auto。

  • アダプティブレイアウト: このチェックボックスをオンにすると、ヒストグラムがレイアウトの調整に使用されます。 このチェックボックスをオフにすると、ヒストグラムがレイアウトの調整に使用されます。

  • 背景色: ドロップダウンリストをクリックして、グリッドの背景色の塗りつぶしスタイル (カラー塗りつぶし、グラデーション塗りつぶしなど) を選択します。 メッシュの背景色を変更します。 デフォルトの色は透明です。 詳細については、「カラーピッカーの説明」をご参照ください。

  • 枠の色: ドロップダウンリストをクリックして、メッシュの枠の色の塗りつぶしスタイルを選択します (カラー塗りつぶし、グラデーション塗りつぶしなど) 。 グリッドの境界線の色を変更します。 デフォルトの色は透明です。 詳細については、「カラーピッカーの説明」をご参照ください。

  • 枠サイズ: [+] または [-] をクリックするか、値を入力して枠サイズを調整します。

• ビジュアルマッピング: ビジュアルマッピングコンポーネントは、ビジュアルエンコード、つまりデータをビジュアル要素にマッピングするために使用されます。

  • 有効にする: 視覚的マッピングを有効にするには、チェックボックスをオンにします。

  • 最小値: カスタムビジュアルマッピングに使用できる最小値。

  • 最大値: カスタムビジュアルマッピングに使用できる最大値。

• ダイアログボックス: 右側の目アイコンをクリックして、ダイアログボックスを表示します。

  • ヒントタイトル: ポインターをホバーしたときに表示されるプロンプトのタイトル。

  • 軸インジケータ

    • Type: インジケーターのタイプ。 有効な値: Line Indicator、Shadow Indicator、Crosshair Indicator。

    • 自動吸着: このチェックボックスをオンにすると、軸インジケーターが自動的にポイントに吸着されます。 この関数は、数値軸と時間軸上でより意味があり、小さな数値点を自動的に見つけることができます。

    • ラベル: 右側の目アイコンをクリックして、軸インジケーターのラベルを表示します。

      • precision: テキストラベルの値の小数点精度。 デフォルトでは、現在の軸の値に基づいて値が自動的に決定されます。 2などの整数値を指定することもできます。これは、小数点以下2桁が保持されることを示します。

      • 外側の間隔: このオプションをオンにすると、軸インジケータのラベルが軸から間隔を空けられます。 チェックボックスをオフにすると、軸インジケータラベルと軸の間に間隔がありません。

      • テキストスタイル

        • 色: 軸インジケーターのラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

        • フォントスタイル: 軸インジケータラベルテキストのフォントスタイル。

        • フォントの太さ: 軸インジケーターのラベルテキストのフォントの太さ。

        • フォント: 軸インジケーターのラベルテキストのフォントファミリ。

        • フォントサイズ: 軸インジケータラベルテキストのフォントサイズ。

      • 背景色: 軸インジケーターのテキストラベルの背景色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

      • 枠の色: 軸インジケーターのテキストラベルの枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

      • Border: 軸インジケーターのテキストラベルの境界線の太さ。

      • 軸スタイル

        • 色: カラーピッカーの説明を参照して、軸の色を変更します。

        • 幅: [+] または [-] 記号をクリックするか値を入力して、軸線の幅を変更します。

        • Type: 軸のタイプ。 必要に応じて、 値は、実線または破線とすることができる。

        • 不透明度: [+] または [-] 記号をクリックするか値を入力して、軸の透明度を変更します。 範囲は [0,1] です。

      • 影のスタイル

        • 色: 影の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

        • 透明度: [+] または [-] 記号をクリックするか値を入力して、影の透明度を変更します。 範囲は [0,1] です。

      • Crosshairスタイル

        • 色: カラーピッカーの説明を参照して、十字線の色を変更します。

        • 幅: [+] または [-] 記号をクリックするか値を入力して、十字線の幅を変更します。

        • Type: 十字線のタイプ。 必要に応じて、 値は、実線または破線とすることができる。

        • 透明度: [+] または [-] 記号をクリックするか値を入力して、十字線の透明度を変更します。 範囲は [0,1] です。

  • トリガー条件: トリガーするトリガーの種類。 [マウス移動トリガー] 、[マウスクリックトリガー] 、および [マウス移動とクリックトリガー] を選択できます。

  • 背景色: ダイアログボックスの背景色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

  • 枠の色: ダイアログボックスの枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

  • 枠の太さ: [+] または [-] をクリックするか、値を入力して背景フレームの枠の太さを変更します。

  • ピン留め: [+] または [-] 記号をクリックするか、手動で数値を入力して背景フレームの内側の余白を変更します。 単位: ピクセル。 デフォルトの内側マージンは5です。

  • テキストスタイル

    • 色: ダイアログボックスのテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

    • フォントスタイル: テキストのフォントスタイルを表示します。

    • フォントの太さ: テキストのフォントの太さを表示します。

    • フォント: テキストのフォントファミリを表示します。

    • フォントサイズ: テキストのフォントサイズを表示します。

• シリーズ

  • 凡例インタラクションのハイライト: このチェックボックスをオンにすると、凡例のホバーが開始されるとインタラクションがハイライトされます。

  • ホバーアニメーション: このオプションを選択すると、ホバースイッチが有効になっているときにアニメーション効果が表示されます。

  • 選択モード: 目アイコンをクリックして選択モードを表示します。

  • 変位: 選択したセクター間の距離を変更するには、[+] または [-] 記号をクリックするか値を入力します。

  • 時計回り: セクタは昇順で時計回りにソートされます。

  • 開始角度: [+] または [-] 記号をクリックするか値を入力して、セクターの開始角度を変更します。

  • 最小角度: [+] または [-] をクリックするか、値を入力してセクターの最小角度を変更します。

  • ナイチンゲール: 右側の目アイコンをクリックして、ナイチンゲールモードを表示します。

  • ラベルの重複防止: 目アイコンをクリックして、ラベルの重複防止モードを表示します。

  • ゼロセクターを表示: 右側の目アイコンをクリックして、ゼロセクターを表示します。

  • 静的: このオプションを選択すると、軸が静的である場合、軸を操作することはできません。

  • [タグ]

    • 通常のアイテム: 右側の目アイコンをクリックして、通常のアイテム (マウスイベントに応答しない列) のラベルテキストを表示します。

      • テキストスタイル

        • 色: 共通アイテムのラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

        • フォントスタイル: ラベルテキストのフォントスタイル。

        • フォントの太さ: ラベルテキストのフォントの太さ。

        • フォント: ラベルテキストのフォントファミリ。

        • フォントサイズ: ラベルテキストのフォントサイズ。

    • キーアイテム: 右側の目アイコンをクリックして、キーアイテムのラベルテキスト (マウスイベントに応答する列) を表示します。

      • テキストスタイル

        • 色: メジャーアイテムのラベルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

        • フォントスタイル: キーアイテムラベルのフォントスタイル。

        • フォントの太さ: ハイライトラベルテキストのフォントの太さ。

        • フォント: ハイライトラベルテキストのフォントファミリ。

        • フォントサイズ: キーアイテムラベルのフォントサイズ。

  • ラベルガイド

    • 通常のアイテム: 右側の目アイコンをクリックして、通常のアイテム (マウスイベントに応答しない列) のラベルテキストを表示します。

      • 長さ: [+] または [-] をクリックするか、値を入力してラベルガイドの長さを変更します。

      • 2番目の長さ: [+] または [-] 記号をクリックするか値を入力して、ラベルガイドの2番目の長さの長さを変更します。

      • 滑らかな曲線: [+] または [-] 記号をクリックするか値を入力して、曲線の滑らかさを変更します。

      • 軸スタイル

        • 色: カラーピッカーの説明を参照して、軸線の色を変更します。

        • 幅: [+] または [-] 記号をクリックするか値を入力して、軸線の幅を変更します。

        • Type: 軸のタイプ。 必要に応じて、 値は、実線または破線とすることができる。

        • 不透明度: [+] または [-] 記号をクリックするか値を入力して、軸の透明度を変更します。 範囲は [0,1] です。

    • キーアイテム: 右側の目アイコンをクリックして、キーアイテムのラベルテキスト (マウスイベントに応答する列) を表示します。

      • 軸スタイル

        • 色: カラーピッカーの説明を参照して、軸線の色を変更します。

        • 幅: [+] または [-] 記号をクリックするか値を入力して、軸線の幅を変更します。

        • Type: 軸のタイプ。 必要に応じて、 有効な値: 実線および破線。

        • 不透明度: [+] または [-] 記号をクリックするか値を入力して、軸の透明度を変更します。 範囲は [0,1] です。

  • 要素スタイル

    • 普通のアイテム

      • デフォルトの色: 右側の目アイコンをクリックして、デフォルトのカラーモードを表示します。

      • 色: カラーピッカーの説明を参照して、共通要素の色を変更します。

      • 枠の色: 共通アイテム要素の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

      • 枠サイズ: [+] または [-] 記号をクリックするか値を入力して、通常の要素の枠サイズを変更します。

      • ボーダースタイル: ボーダーのストロークタイプ。 ストロークタイプは、実線または点線です。

      • 透明度: [+] または [-] 記号をクリックするか値を入力して、通常の要素の透明度を変更します。 有効な値は 0～1 です。

    • 主なアイテム

      • 色: カラーピッカーの説明を参照して、ハイライトされた要素の背景色を変更します。

      • 枠の色: メジャーアイテム要素の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

      • 枠の太さ: [+] または [-] をクリックするか、手動で値を入力して、キー要素の枠の太さを変更します。

      • ボーダースタイル: ボーダーのタイプ。 このパラメーターはオプションです。 有効な値: SolidおよびDotted。

      • 透明度: [+] または [-] 記号をクリックするか値を入力して、通常の要素の透明度を変更します。 有効な値は 0～1 です。

• アニメーション: アニメーションを有効にするには、このチェックボックスをオンにします。

[データ] タブ

設定フィールドの説明

表 1. パラメーター

パラメーター	説明
制御モード	スイッチをオンにすると、ウィジェットの初期化時にデータが要求されません。 データリクエストは、コールバックIDまたはBlueprint Editorで設定されたメソッドに基づいてのみトリガーされます。 スイッチをオフにすると、データ要求が自動的にトリガーされます。 デフォルトでは、スイッチはオフになっています。
自動データ要求	[自動データ要求] チェックボックスをオンにすると、動的ポーリングを有効にし、ポーリング間隔を手動で指定できます。 このチェックボックスをオンにしないと、データは自動的に要求されません。 手動でページを更新してデータを要求するか、Blueprint EditorまたはコールバックIDイベントを使用してデータ要求をトリガーする必要があります。
データソース	キャンバスエディターの右側のパネルで、[データ] タブをクリックします。 [静的データ] の横にある [設定] をクリックします。 [Configure Datasource] パネルで、[data source Type] ドロップダウンリストからデータソースを選択します。 コードエディターでデータクエリのコードを入力し、[データ応答のプレビュー] をクリックしてデータソースの応答をプレビューし、応答を表示します。 詳細については、「資産データの設定」をご参照ください。
データフィルター	[データフィルタ] チェックボックスをオンにすると、データ構造の変換、データのフィルタリング、および簡単な計算を実行できます。 [フィルターの追加] の横にあるプラス記号 (+) をクリックすると、表示されるエディターでデータフィルターのスクリプトを設定できます。 詳細については、「データフィルターの使用」をご参照ください。
データ応答結果	データ要求に対する応答。 データソースが変更された場合は、[データ応答結果] の横にあるアイコンをクリックして、データ応答をリアルタイムで表示できます。

[インタラクション] タブ

インタラクションの説明

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

1. Canvas Editorでウィジェットを右クリックし、[Blueprint Editorにエクスポート] を選択します。

2. 左上隅のアイコンをクリックします。

3. Blueprint Editorで、[インポートしたノード] ウィンドウで [極面積グラフ] をクリックします。 次の図に示すように、キャンバスで極面積グラフのパラメータを表示できます。

   • Event

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

   • Action

     ポリシーアクション	説明
     要求データインタフェース	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttps:// api.testで、リクエストデータインターフェイスに転送されるデータが { id: '1'} の場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。
     データのインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
     ハイライト	アクションの入力データはオブジェクトタイプです。 パラメーターには、seriesName (シリーズ名) 、seriesIndex (シリーズインデックス) 、dataIndex (データインデックス) 、およびname (データ名) が含まれます。 Sample data: { "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }
     ハイライト解除	アクションの入力データはオブジェクトタイプです。 パラメーターには、seriesName (シリーズ名) 、seriesIndex (シリーズインデックス) 、dataIndex (データインデックス) 、およびname (データ名) が含まれます。 Sample data: { "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }
     表示ダイアログボックス	アクションの入力データはオブジェクトタイプです。 パラメータは、dataindex (データインデックス) 、name (データ名) 、x (x軸位置) 、およびy (y軸位置) を含む。 Sample data: { "dataIndex": 1, "name": "", "x": 1, "y": 1 }
     [非表示] ダイアログボックス	ダイアログボックスを非表示にします。パラメータは必要ありません。
     円グラフセクター選択ステータス制御	アクションの入力データはオブジェクトタイプです。 パラメーターには、type (ファンアクションタイプ) とseriesName (シリーズ名) が含まれます。 Sample data: { "type": "pieToggleSelect", "seriesName": "", "seriesIndex": 1, "dataIndex": 1, "name": "" }
     コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。 [設定] パネルで、[設定をクリップボードにコピー] をクリックして、コンポーネントの設定データを取得します。 その後、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" } }