DataV:散布図 (V3.x)

パラメーター

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

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

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

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

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

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

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

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

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

• チャート

  • マージン: チャートの4方向とウィジェットの境界線の間の距離。 単位: ピクセル。

    パラメーター	説明
    トップ	チャートの上部とウィジェットの上部境界の間の距離。
    ボトム	チャートの下部とウィジェットの下部境界の間の距離。
    左	チャートの左側とウィジェットの左境界の間の距離。
    正しい	チャートの右側とウィジェットの右枠の間の距離。

  • NULLデータ: スイッチをオンにすると、y軸の値が0の散布点にすべてのnullデータが表示されます。

    Nullableデータは次のように定義されます。

    • データ値は0またはundefinedです。

    • 一連のデータレコードが欠落しているため、データは空です。

  • 最大負荷: ロードする入力データレコードの最大数を指定できます。 システムは、レイアウト、描画、およびコンピューティング用の入力データレコードの最大数を読み込みます。 これにより、視覚的なアプリケーションが保証されます。

  • 凡例: 凡例のスタイル。 アイコンをクリックすると、凡例を表示または非表示にできます。

    パラメーター	説明
    テキスト	テキストのフォントスタイル、フォントサイズ、フォントの色、フォントの太さなど、凡例のテキストのスタイルを設定します。 詳細については、「カラーピッカーの手順」をご参照ください。
    レイアウト	凡例間の位置関係。 間隔 左と右の間隔: 隣接する凡例の左側と右側の間の距離。 この設定項目は、複数のシリーズがある場合にのみ有効です。 距離: 凡例とウィジェットの上下の境界との間の距離。 位置: ウィジェットの開始座標を基準とした凡例の位置。 [左上] 、[上中央] 、[上右] 、[下左] 、[下中央] 、または [下右] を選択できます。

• 軸: x軸またはy軸を選択できます。

  • x軸

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

    • データタイプ: x軸ラベル付きデータのタイプ。

      パラメーター	説明
      数値タイプ	整数や浮動小数点数などの数値データをサポートします。
      カテゴリタイプ	文字や文字列などのカテゴリタイプのデータがサポートされています。
      時間タイプ	時間タイプのデータは、データ形式を設定する必要があります。
      ブランクを両側に残す	x軸の2つの辺の間の距離。 有効な値は 0～1 です。
      interval	x軸上の2つのカテゴリ間の間隔の割合。 値が大きいほど、パーセンテージは大きくなります。 有効な値は 0～1 です。
      データフォーマット	時間データのみ有効なデータの表示形式は、% Y/% m/% d % H:% M:% S形式を参照して設定してください。
      スコープ	x軸の最小値と最大値の範囲値: 最大値: x軸の最大値。 カスタム値を指定できます。 デフォルト値はautoです。 システムは、タグの最大値、最小値、および数に基づいて一致を自動的に計算します。 最小値: x軸の最小値。 カスタム値を指定できます。 デフォルト値はautoです。 システムは、タグの最大値、最小値、および数に基づいて一致を自動的に計算します。 説明 軸ラベルの最小値と最大値のデフォルト値は、データパネルのデータxフィールドと一致する時間範囲内にあります。 データパネルの値が設定パネルの最大値および最小値と競合する場合、設定パネルのデータ範囲の値が優先されます。

    • 軸ラベル: x軸ラベルのスタイル。

      説明

      データ形式と設定形式が統一されていない場合、ウィジェットは異常表示されます。

      パラメーター	説明
      表示形式	表示するデータ形式。 このパラメーターは、時間ベースおよび数値データに対してのみ有効です。 % m/% d % Y % H:% M:% S時間、整数参照dおよび浮動小数点参照 .1fを参照してください。
      テキスト	x軸ラベルのテキスト (フォントスタイル、フォントサイズ、フォントの色、フォントの太さなど) 。 詳細については、「カラーピッカーの説明」をご参照ください。 テキストの色を変更します。
      軸ラベル表示	x軸ラベルの表示スタイルは次のとおりです。 角度: x軸ラベルの角度。 値: 水平、斜め、垂直。 数量: x軸上のラベルの数。 軸単位: x軸ラベルの単位。

    • 軸: x軸のスタイル。 アイコンをクリックすると、x軸が表示されます。

      色: x軸の色。

    • グリッドライン: x軸グリッドラインのスタイル。 アイコンをクリックすると、x軸のグリッド線を表示または非表示にできます。

      色: x軸のグリッド線の色。

  • Y軸

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

    • Range: y軸の最小値と最大値の範囲。

      パラメーター	説明
      最小値	y軸の最小値。 値をカスタマイズするか、値を選択できます。 0: デフォルトの最小値は0です。 最小データ値: データの最小値。 自動丸め: データの最大値、最小値、およびメトリックポイント数が自動的に計算されます。
      最大値	y軸の最大値。 値をカスタマイズするか、値を選択できます。 最大データ値: データの最大値。 自動丸め: データの最大値、最小値、およびメトリックポイント数が自動的に計算されます。

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

      パラメーター	説明
      表示形式	y軸ラベル値の表示形式。 有効な値: デフォルト、11 (整数) 、11.1 (浮動小数点) 、11.11 (浮動小数点) 。
      テキスト	y軸ラベルテキストのフォントスタイル、テキストの太さ、フォントサイズ、色。
      軸ラベル表示	y軸ラベルの表示スタイルは次のとおりです。 角度: y軸ラベルの角度。 有効な値: 水平、チルト、および垂直。 数量: y軸上のラベルの数。 軸単位: y軸ラベルの単位。

    • 軸: y軸のスタイル。 アイコンをクリックすると、y軸が表示されます。

      色: y軸の色。

    • グリッドライン: y軸グリッドラインのスタイル。 アイコンをクリックすると、グリッド線を表示または非表示にできます。

      色: y軸上のグリッド線の色。

• シリーズ

  data series: 右側のまたはアイコンをクリックして、データシリーズを追加または削除します。 またはアイコンをクリックして、複数のデータ系列の配置スタイルを設定します。

  パラメーター	説明
  シリーズ名	カスタマイズ可能なデータ系列の名前。 このパラメーターが空の場合、コンポーネントデータのsフィールド値がシリーズ名として表示されます。 このパラメーターが空でない場合は、データが返される順序を確認する必要があります。
  カラー	このシリーズの下部散布の色。
  ストローク	このシリーズのスキャッタストロークの色。

• その他のシナリオ

  • Easing Animation: 散布図のアニメーション効果スタイル。 アイコンをクリックすると、アニメーション効果を有効または無効にできます。

    パラメーター	説明
    アニメーション設定	Edding Effect: アニメーションのイージング効果。 このシステムは、さまざまな共通の緩和効果を提供します。
    入場アニメーション	コンポーネントによってレンダリングされる最初のアニメーションの期間。 単位：ms。
    更新アニメーション	更新アニメーション期間: ウィジェットデータが更新されたときのアニメーションの期間。 単位：ms。

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

    パラメーター	説明
    消える遅延時間	トリガー条件が満たされない場合、ダイアログボックスは消えます。 この設定項目は、ダイアログボックスが消えるまでの遅延時間をms単位で設定します。
    トリガー条件	トリガータイプ: トリガーするターゲットのタイプを示すダイアログボックス。 このパラメーターはオプションで、[データ項目] と [軸] を含みます。 トリガーアクション: トリガーするアクションのダイアログボックス。 このフィールドはオプションで、[ホバー] と [クリック] を含みます。
    テキストスタイル	ダイアログボックス内のテキストのスタイル (フォントスタイル、太さ、フォントサイズ、色など) 。
    背景ボックススタイル	ダイアログボックスの背景ボックススタイル。 背景色: ダイアログボックスの背景色。 カスタム: ダイアログボックスの幅と高さ。 単位: ピクセル。 アイコンをクリックして、カスタムダイアログボックスをオンまたはオフにします。 Pin: ダイアログボックスの内側の余白。 単位: ピクセル。 オフセット 水平オフセット: マウスの矢印に対するダイアログボックスの水平オフセット。 単位: ピクセル 垂直オフセット: マウスの矢印に対するダイアログボックスの垂直オフセット。 単位: ピクセル 国境 枠の幅: ダイアログボックスの枠の太さ。 単位: ピクセル。 枠の色: ダイアログボックスの枠の色。

フィルタリングテーブルのメタデータ。

上の図のサンプルコード:

[
  {
    "x": "2010/02/01 00:00:00" 、
    "y": "175" 、
    "s": "1"
  },
  {
    "x": "2010/02/10 00:00:00" 、
    "y": "200" 、
    "s": "1"
  },
  {
    "x": "2010/03/01 00:00:00" 、
    "y": "125" 、
    "s": "1"
  },
  {
    "x": "2010/03/20 00:00:00" 、
    "y": "190" 、
    "s": "1"
  },
  {
    "x": "2010/04/01 00:00:00" 、
    "y": "190" 、
    "s": "2"
  },
  {
    "x": "2010/04/21 00:00:00" 、
    "y": "240" 、
    "s": "2"
  },
  {
    "x": "2010/04/30 00:00:00" 、
    "y": "225" 、
    "s": "2"
  },
  {
    "x": "2010/05/09 00:00:00" 、
    "y": "150" 、
    "s": "2"
  },
  {
    "x": "2010/05/31 00:00:00" 、
    "y": "230" 、
    "s": "2"
  },
  {
    "x": "2010/06/11 00:00:00" 、
    "y": "190" 、
    "s": "2"
  },
  {
    "x": "2010/06/30 00:00:00" 、
    "y": "275" 、
    "s": "3"
  },
  {
    "x": "2010/07/15 00:00:00" 、
    "y": "300" 、
    "s": "3"
  },
  {
    "x": "2010/07/21 00:00:00" 、
    "y": "375" 、
    "s": "3"
  },
  {
    "x": "2010/08/15 00:00:00" 、
    "y": "290" 、
    "s": "3"
  },
  {
    "x": "2010/09/01 00:00:00" 、
    "y": "190" 、
    "s": "3"
  },
  {
    "x": "2010/09/10 00:00:00" 、
    "y": "230" 、
    "s": "3"
  },
  {
    "x": "2010/10/29 00:00:00" 、
    "y": "325" 、
    "s": "3"
  },
  {
    "x": "2010/11/22 00:00:00" 、
    "y": "390" 、
    "s": "3"
  },
  {
    "x": "2010/11/30 00:00:00" 、
    "y": "290" 、
    "s": "3"
  },
  {
    "x": "2010/12/25 00:00:00" 、
    "y": "330" 、
    "s": "3"
  }
]

相互連携

ウィジェット間のインタラクションを有効にするには、[有効化] チェックボックスをオンにします。 散布図の散布点をクリックすると、データ要求がトリガーされ、コールバック値がスローされて、さまざまな散布点のデータが動的に読み込まれます。 デフォルトでは、x、y、sの値が返されます。 詳細は、「コールバックIDの設定」をご参照ください。

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

1. キャンバスエディターで、レイヤーパネルでウィジェットを右クリックし、[ブループリントエディターに追加] を選択します。

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

3. Blueprint Editorで、[ノードのインポート] ペインで [散布図] コンポーネントをクリックします。 散布図コンポーネントのパラメーターは、キャンバス上で表示できます。

   • イベント

     イベント	説明
     散布図インターフェイス要求が完了したとき	イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータについては、「データ」をご参照ください。
     データ項目がクリックされたとき	散布図の散布点をクリックしたときに発生するイベントで、散布点に対応するデータ項目も発生します。

   • ポリシーアクション

     ポリシーアクション	説明
     散布図APIのリクエスト	このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースがhttp:// api.testで、スキャッターチャートAPIのリクエストアクションに渡されるデータが { id: '1'} の場合、最終的なリクエストインターフェイスはhttp:// api.test?id=1です。
     散布図のインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータについては、「データ」をご参照ください。
     ハイライト	データ項目に対応する要素を強調表示します。 例： { data: { x: 'Shanghai' // You can list multiple highlight conditions, similar to filter. }, options: { style: { fill: 'red' }, selectMode: 'single', cancelHighlightFirst: true } }
     ハイライト解除	データ項目に対応する要素の強調表示をキャンセルします。 例： { data: { x: 'Shanghai' }, options: { mode: 'single' // If the value is single, only one highlight is canceled when multiple data items are hit. If the value is multiple, all highlights are canceled when multiple data items are hit. } }
     クリアコンポーネント	コンポーネントデータをクリアします。 パラメータは必要ありません。
     コンポーネント設定の更新	ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。
     表示	ウィジェットは、パラメータを指定する必要なしに表示されます。
     非表示	ウィジェットは、パラメータを指定する必要なしに非表示になります。
     スイッチを隠し状態	ウィジェットは非表示または表示されます。
     移動	ウィジェットが指定された場所に移動されます。 { // 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" } }