すべてのプロダクト
Search
ドキュメントセンター

DataV:Echarts大規模散布図

最終更新日:Apr 09, 2025

このトピックでは、Echartsの大規模散布図のグラフスタイルと構成パネルについて説明します。

チャートスタイル

image

設定パネル image

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • : 凡例の幅を調整する値を入力します。 デフォルト値はautoで、凡例の幅に適合します。

    • 高さ: 凡例の高さを調整する値を入力します。 デフォルト値: auto

    • 方向: ドロップダウンリストから凡例の方向を選択します。

      • 水平: 凡例の水平方向の分布。

      • 垂直: 凡例は垂直に分散されます。

    • 配置: ドロップダウンリストをクリックして、凡例とテキストの配置方法を選択します。

      • 自動: デフォルトでは、自動はウィジェットの位置と向きに基づいて決定されます。

      • 左揃え: グラフィックがテキストの左側にある場合、左揃えになります。

      • 中央に揃え: 凡例のグラフィックがテキストに重なっている場合は、中央に揃えます。

      • 右揃え: グラフィックがテキストの右側にある場合、右揃えになります。

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

    • 要素の間隔: [+] または [-] 記号をクリックするか数値を入力して、凡例の各アイテム間の距離を調整します。 水平レイアウトの水平間隔、垂直レイアウトの垂直間隔。

    • グラフの幅: [+] または [-] 記号をクリックするか数値を入力して、凡例の幅を調整します。

    • グラフィックの高さ: [+] または [-] 記号をクリックするか値を入力して、凡例の高さを調整します。

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

    • オフの色: 凡例がオフのときに凡例の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。 プレビューまたは公開ページで凡例要素をクリックした場合にのみ、効果を確認できます。

    • テキストスタイル

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

      • フォントスタイル: 凡例テキストのフォントスタイル。

      • フォントの太さ: 凡例テキストのフォントの太さ。

      • フォント: 凡例テキストのフォントファミリ。

      • フォントサイズ: [+] または [-] をクリックするか、値を入力して凡例のフォントサイズを変更します。

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

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

    • 枠の幅: [+] または [-] をクリックするか、値を入力して凡例の枠の太さを調整します。

    • Alignment: 凡例の配置。 このパラメーターはオプションです。 デフォルト値: Center左揃えまたは右揃えにすることもできます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • 背景色: メッシュの背景色を変更します。 デフォルトでは、背景色は透明です。 詳細については、「カラーピッカーの説明」をご参照ください。

    • 枠の色: グリッドの枠の色を変更します。 デフォルトの色は透明です。 詳細については、「カラーピッカーの説明」をご参照ください。

    • 枠の幅: [+] または [-] をクリックするか、値を入力して枠の太さを調整します。

  • X軸: アイコンをクリックしてX軸を表示します。 x轴

    • Displacement: デフォルト位置からのx軸のオフセット。 デフォルト値は0です。

    • Type: 軸のタイプ。 有効な値:

      • value: 連続データに適した数値軸。

      • category: カテゴリ軸。個別のカテゴリデータに適用されます。 このタイプを使用する場合は、データパネルでカテゴリデータを設定する必要があります。

      • time: 時間軸は、連続した時系列データに適しています。 値軸と比較して、時間軸は時間でフォーマットされ、スケール計算も異なります。 例えば、月、週、日、または時間の範囲のスケールは、スパン範囲に従って決定される。

      • log: 対数軸。対数データに適用できます。

    • 名前: x軸の名前。

    • 位置: x軸上の名前の位置。 [開始][センター] 、または [終了] を選択できます。 デフォルト値: End

    • 名前スタイル

      • : x軸の名前テキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。

      • フォントスタイル: x軸上の名前のフォントスタイル。

      • フォントの太さ: x軸上の名前のフォントの太さ。

      • フォント: x軸上の名前のフォントファミリ。

      • フォントサイズ: [+] または [-] をクリックするか、値を入力して、x軸上の名前のフォントサイズを変更します。

    • 名前の間隔: [+] または [-] 記号をクリックするか値を入力して、軸と軸の間の距離を変更します。

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

    • [リバース]: このチェックボックスをオンにすると、軸が逆方向に表示されます。 このチェックボックスをオフにすると、軸が順方向に表示されます。

    • 白のまま: このチェックボックスをオンにすると、軸の両側が空白のままになります。 このチェックボックスをオフにすると、軸の両側が空白のままになります。

    • 最小値: 軸スケールの最小値。 デフォルト値は最小データ値です。 この値は、軸上のデータの最小値が最小スケールとして使用されることを示します。 このパラメーターを設定しないと、軸のスケールが均等に分布するように、最小値が自動的に計算されます。

    • 最大値: 軸上のスケールの最大値。 デフォルト値は [最大データ値] です。 この値は、軸上のデータの最大値が最大スケールとして使用されることを示します。 この値を設定しない場合、最大値は自動的に計算され、軸スケールの均等な分布が保証されます。

    • 自動スケーリング: 選択した場合、座標スケールに強制的にゼロスケールが含まれません。 このパラメーターは、値軸でのみ有効です。 この設定項目は、最大値と最小値を設定すると無効になります。

    • segments: [+] または [-] 記号をクリックするか、値を入力して軸のセグメントを設定します。 このパラメーターを設定しないと、軸のスケールが均等に分布するように、最小値が自動的に計算されます。 このセグメントは単なる推定値であり、実際に表示されるセグメントの数は、セグメント化後の軸スケール表示の可読性に応じてこれに基づいて調整されることに留意されたい。 カテゴリ軸で無効です。

    • 最小間隔サイズ: [+] または [-] をクリックするか、値を入力して軸間の最小間隔を指定します。 例えば、座標軸の分割スケールが整数で表示されることを1に保証するように設定することができる。 値軸または時間軸でのみ有効です。

    • ベース: 対数軸のベース。 このパラメーターは、対数軸に対してのみ有効です。

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

    • : 右側のアイコンをクリックして、x軸を表示します。

      • On Zero: x軸またはy軸の軸が他の軸のゼロスケール上にあるかどうかを示します。 このパラメーターは、他の軸が値軸であり、ゼロスケールを含む場合にのみ有効です。

      • 軸スタイル

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

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

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

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

    • スケール: 右側のアイコンをクリックして、x軸にスケールを表示します。

      • ラベルに揃える: このチェックボックスをオンにすると、チェックマークがラベルに揃えられます。 このパラメーターは、カテゴリ軸に [空白のまま] を選択した後にのみ有効になります。

      • interval: [+] または [-] 記号をクリックするか、数値を手動で入力して、軸スケールの表示間隔を変更します。 このパラメータはカテゴリ軸で有効です。

      • 内部: このチェックボックスをオンにすると、軸のスケールが内側になります。 このチェックボックスをオフにすると、軸のスケールが外側を向いています。

      • 長さ: スケールの長さを変更するには、[+] または [-] 記号をクリックするか数値を入力します。

      • 軸スタイル

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

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

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

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

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

      • interval: 軸上のスケールラベルの表示間隔です。 このパラメータはカテゴリ軸で有効です。 デフォルトでは、ラベルは互いに重ならない間隔で表示されます。 0すべてのラベルを強制的に表示するように設定できます。 このパラメーターを1に設定すると、他のラベルごとに1つのラベルが表示されます。 このパラメーターを2に設定すると、他のラベルごとに1つのラベルが表示されます。

      • 内部: このチェックボックスをオンにすると、軸のラベルが内側になります。 このチェックボックスをオフにすると、軸のラベルが外側に向きます。

      • Rotate: スケールラベルの回転角度。 カテゴリ軸上のカテゴリラベルを表示できない場合は、スケールラベルを回転させて、それらが重ならないようにすることができます。 回転角度は-90度から90度の範囲です。

      • Outer Spacing: スケールラベルと軸の間の距離。

      • 最小ラベルを表示: このオプションを選択すると、最小スケールのラベルが表示されます。 デフォルトでは、ラベルが重なっている場合、最小スケールのラベルは表示されないと自動的に判断されます。

      • 最大ラベルを表示: このオプションを選択すると、最大スケールのラベルが表示されます。 デフォルトでは、ラベルが重なっている場合、最大スケールのラベルは表示されないと自動的に判断されます。

      • テキストスタイル

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

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

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

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

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

        • Alignment: 軸上のスケールラベルテキストの水平方向の配置。 デフォルト値はAutoです。 必要に応じて、

          • 自動

          • 左揃え

          • センター

          • 右に合わせる

        • 配置: オプション。 [上部配置][中央配置] 、または [下部配置] を選択できます。

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

      • interval: [+] または [-] 記号をクリックするか、数値を手動で入力して、軸分離線の表示間隔を変更します。 このパラメータはカテゴリ軸で有効です。 デフォルトでは、行セパレータは重複しないポリシー間隔で表示されます。 0を設定すると、すべての行セパレータが強制的に表示されます。 値1は、すべての行セパレータが行セパレータを表示することを示します。 2の値は、すべての2つの行セパレータが行セパレータを表示することを示します。

      • 軸スタイル

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

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

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

    • 分割領域: 右側のアイコンをクリックして、分割領域を表示します。

      • interval: [+] または [-] 記号をクリックするか、数値を手動で入力して、軸分離領域の表示間隔を変更します。 このパラメータはカテゴリ軸で有効です。 デフォルトでは、分割領域は重ならない間隔で表示されます。 0、全ての分割領域を強制的に表示するように設定することができる。 値が1に設定されている場合、1つの分割領域が1つおきに表示されます。 値が2に設定されている場合、1つの分割領域が2つの分割領域ごとに表示されます

      • エリアスタイル

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

  • Y軸: 詳細については、「X軸」をご参照ください。

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

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

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

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

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

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

    • テキストスタイル

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

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

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

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

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

  • シリーズ: 加号图标または垃圾桶图标アイコンをクリックして、条件付きスタイルを追加または削除します。 横排列图标または竖排列图标アイコンをクリックして、複数の条件付きスタイルの配置スタイルを設定します。 アイコンをクリックし复制图标て、選択した条件付きスタイル設定をコピーし、同じ設定の条件付きスタイルを追加します。 系列

    • 名前: カスタムシリーズの名前。 データ内のsフィールド値と一緒に使用する必要があります。

    • Polar index: 極座標系のインデックス。 デフォルト値は0です。 このパラメーターは、単一のチャートインスタンスに複数の極座標系が存在する場合に便利です。

    • geo index: 地理座標系のインデックス。 デフォルト値は0です。 このパラメーターは、単一のチャートインスタンスに複数の地理座標系が存在する場合に役立ちます。

    • calendarIndex: 使用されているカレンダー座標系のインデックス。 デフォルト値は0です。 このパラメーターは、単一のチャートインスタンスに複数のカレンダー座標系が存在する場合に便利です。

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

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

    • マーカーグラフィック: カスタムグラフィック。 デフォルト値: Circle。 タグタイプには、NoneCircleRectangleRectangleTriangleDiamondPin、およびArrowが含まれます。 詳細については、ECharts公式Webサイトをご覧ください。

    • マーカーサイズ: [+] または [-] 記号をクリックするか値を入力して、マーカーパターンのサイズを変更します。

    • 回転角度: [+] または [-] 記号をクリックするか値を入力して、マーカーの回転角度を変更します。

    • 大規模な最適化: 大規模なデータ最適化を有効にするかどうかを選択します。 大量のデータグラフィックスが発生した場合に、大規模なデータ最適化を有効にできます。 データ量が指定されたしきい値を超える場合は、レンダリングしきい値設定項目をオンにしてレンダリングを最適化します。 ただし、最適化後は、単一のデータ項目のスタイルをカスタマイズすることはできません。

    • レンダリングしきい値: レンダリング最適化のしきい値。 デフォルト値: 2000

    • [タグ]

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

        • テキストスタイル

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

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

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

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

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

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

        • テキストスタイル

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

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

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

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

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

    • 要素スタイル

      • 普通のアイテム

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

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

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

        • ボーダースタイル: ボーダーに使用するストロークのタイプ。 タイプはSolidまたはDottedです。 デフォルト値: Solid

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

      • 主なアイテム

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

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

        • 枠の太さ: [+] または [-] 記号をクリックするか値を入力して、メジャーアイテムの枠の太さを変更します。

        • ボーダースタイル: ボーダーのタイプ。 [実線] または [点線] を選択できます。 デフォルト値: Solid

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

    • 静的: このチェックボックスをオンにすると、シリーズは応答せず、マウスイベントをトリガーします。

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

[データ] タブ

image

設定フィールドの説明

パラメーター

説明

x

散布図の各x軸のカテゴリ、つまりx軸の値を設定するために使用します。

y

散布図の各点の値を設定するために使用します。

s

(オプション) シリーズの値。スタイルパネルのシリーズ構成項目と組み合わせて使用されます。

表 1. パラメーター

パラメーター

説明

制御モード

スイッチをオンにすると、ウィジェットの初期化時にデータが要求されません。 データリクエストは、コールバックIDまたはBlueprint Editorで設定されたメソッドに基づいてのみトリガーされます。 スイッチをオフにすると、データ要求が自動的にトリガーされます。 デフォルトでは、スイッチはオフになっています。

自動データ要求

[自動データ要求] チェックボックスをオンにすると、動的ポーリングを有効にし、ポーリング間隔を手動で指定できます。 このチェックボックスをオンにしないと、データは自動的に要求されません。 手動でページを更新してデータを要求するか、Blueprint EditorまたはコールバックIDイベントを使用してデータ要求をトリガーする必要があります。

データソース

キャンバスエディターの右側のパネルで、[データ] タブをクリックします。 [静的データ] の横にある [設定] をクリックします。 [Configure Datasource] パネルで、[data source Type] ドロップダウンリストからデータソースを選択します。 コードエディターでデータクエリのコードを入力し、[データ応答のプレビュー] をクリックしてデータソースの応答をプレビューし、応答を表示します。 詳細については、「資産データの設定」をご参照ください。

データフィルター

[データフィルタ] チェックボックスをオンにすると、データ構造の変換、データのフィルタリング、および簡単な計算を実行できます。 [フィルターの追加] の横にあるプラス記号 (+) をクリックすると、表示されるエディターでデータフィルターのスクリプトを設定できます。 詳細については、「データフィルターの使用」をご参照ください。

データ応答結果

データ要求に対する応答。 データソースが変更された場合は、[データ応答結果] の横にあるRefresh icon アイコンをクリックして、データ応答をリアルタイムで表示できます。

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

image

インタラクションの説明

インタラクション

説明

データ項目がクリックされたとき

ウィジェット操作機能を有効にするには、[有効化] を選択します。 Large Scatter Chartウィジェットにはインタラクティブな設定があります。 クリックしてデータ項目を選択すると、コールバック値がスローされます。 デフォルトでは、データのxフィールドとyフィールドがスローされます。 詳細については、「ティッカーボードのコールバックIDの設定」をご参照ください。

凡例がクリックされたとき

ウィジェット操作機能を有効にするには、[有効化] を選択します。 Large Scatter Chartウィジェットにはインタラクティブな設定があります。 凡例をクリックすると、コールバック値が返されます。 デフォルトでは、データ内の選択されたフィールドが返されます。 詳細については、「ティッカーボードのコールバックIDの設定」をご参照ください。

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 (凡例アクションタイプ) とname (凡例名) が含まれます。 Sample data:

      {  
          "type": "legendToggleSelect",  
          "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"
            }
          }