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

DataV:3Dラインチャート

最終更新日:Jul 15, 2024

このトピックでは、3D折れ線グラフのグラフスタイルと構成パネルについて説明します。

チャートスタイル

3次元折れ線グラフは折れ線グラフの一種です。 従来の2次元折れ線グラフと比較して、3次元折れ線グラフは、同じカテゴリの異なるデータの変化を3Dで表示します。 データの変化の傾向を3次元効果でインテリジェントに表示します。 image

設定パネル image

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

  • Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックする锁定长宽比按键と、ウィジェットの縦横比をロックし、ウィジェットの幅と高さを同じ比率で変更できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。

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

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

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

    • アイコンの圆圈旋转控制图标黒い点をドラッグして、ウィジェットの回転角度を制御します。

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

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

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

  • グローバル 全局配置面板

    パラメーター

    説明

    シーン幅

    コンポーネントの3D立体効果の幅の値。

    シーンの高さ

    コンポーネントの3D立体効果の下での高さの値。

    シーンの奥行き

    コンポーネントの3Dステレオ効果の下の深度値。

    カメラ位置

    カメラ位置は、垂直方向水平方向、および距離の3つのパラメータを含む。 カメラの原理に基づいてこれらのパラメータを調整して、3D折れ線グラフを目的のサイズと向きで表示できます。

    • 垂直: 垂直方向のカメラの回転角度。 有効な値: -90〜90。

    • 水平: 水平方向のカメラの回転角度。 有効な値: -180から180。

    • 距離: カメラと3D折れ線グラフの間の距離。 距離が大きいほど、折れ線グラフの表示は小さくなります。

    投影モード

    透視投影正投影を含む3Dシーンの投影モード。

    自動回転

    スイッチをオンにすると、コンポーネントは自動回転スタイルを有効にします。 スイッチをオフにすると、コンポーネントは自動回転を無効にします。

    回転速度

    ウィジェットが自動的に回転する速度。 この設定は、自動回転機能が有効になった場合にのみ有効になります。

    パフォーマンスモニタリング

    スイッチをオンにすると、ウィジェットの右上隅でパフォーマンスモニタリング機能が有効になります。 スイッチをオフにすると, パフォーマンス监视机能が无効になります。

  • X軸: 眼睛图标アイコンをクリックして、x軸を表示します。 image

    • Text: x軸に沿ったテキストのスタイル。

      パラメーター

      説明

      フォントサイズ

      x軸上のテキストのフォントサイズ。

      カラー

      x軸上のテキストの色。

      フォントの重み

      x軸上のテキストのフォントの太さ。

    • 軸ラベル: x軸ラベルのスタイル。 アイコンをクリックし眼睛图标て、x軸のラベルスタイルを制御します。

      説明

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

      パラメーター

      説明

      データフォーマット

      時間ベースのデータ形式については、% m/% d % Y % H:% M:% Sを参照してください。

      表示形式

      表示されるデータ形式は、% m/% d/% Y % H:% M:% S時間、整数参照d、浮動小数点参照 .1fを参照してください。

      数量

      x軸ラベルの数。

      ラベルオフセット

      x軸ラベルの上下変位距離。 単位: ピクセル

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

      パラメーター

      説明

      カラー

      x軸の色。

      透明性

      x軸の透明度。

      x軸の幅。

    • 目盛り: x軸の目盛りのスタイル。 アイコンをクリックする眼睛图标と、x軸の目盛りを表示または非表示にすることができます。

      パラメーター

      説明

      長さ

      x軸目盛りの長さの値。

      カラー

      x軸の目盛りの色。

      透明性

      x軸の目盛りの透明度。

      x軸の目盛りの幅。

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

      パラメーター

      説明

      カラー

      x軸のグリッド線の色。

      透明性

      x軸スケールのグリッド線の透明度。

      x軸のグリッド線の幅。

    • Y軸: 構成はx軸と同様です。 詳細については、「X軸」のセクションをご参照ください。

    • z軸: 構成はx軸と同様です。 詳細については、x軸のセクションをご参照ください。

  • ダイアログボックス: プレビューページまたは公開ページでマウスオーバーまたはポリラインをクリックしたときに表示されるダイアログボックスのスタイル。 アイコンをクリックし眼睛图标て、ダイアログボックスの表示を制御できます。 image

    • 背景ボックススタイル

      パラメーター

      説明

      ダイアログボックスの幅。

      高さ

      ダイアログボックスの高さ。

      背景色

      ダイアログボックスの背景色。

      インテリアマージン

      ダイアログボックスの内側の余白。 単位: ピクセル

      水平オフセット

      マウスの矢印の位置に対するダイアログボックスの水平方向のオフセット。 単位: ピクセル

      垂直オフセット

      マウスの矢印の位置に対するダイアログボックスの垂直方向のオフセット。 単位: ピクセル

      ボーダーカラー

      ダイアログボックスの境界線の色。

      ボーダー厚さ

      ダイアログボックスの境界線の太さ。 単位: ピクセル。

    • テキストスタイル: フォントスタイル、太さ、フォントサイズ、色など、ダイアログボックス内のテキストのスタイル。

  • 凡例: チャートの凡例スタイル。 アイコンをクリックすると眼睛图标、凡例を表示または非表示にできます。 image

    • テキスト: 凡例テキストのフォントサイズ、フォントの色、フォントの太さを設定します。 詳細については、「カラーピッカーの説明」をご参照ください。

    • レイアウト

      パラメーター

      説明

      左間隔

      凡例とウィジェットの左側の間の距離。

      トップ間隔

      凡例とコンポーネントの上部の間の距離。

      内側の間隔

      隣接する凡例の左側と右側の間の距離。 この設定項目は、複数のシリーズがある場合にのみ有効です。

  • シリーズ image

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

    パラメーター

    説明

    シリーズ名

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

    カラー

    このデータシリーズの色。

    透明性

    このデータシリーズの透明性。

    おおよそのカーブ

    スイッチをオンにして、この一連の下部ポリラインのスタイルを近似曲線としてオンにします。 近似曲線のスタイルをオフにするには、スイッチをオフにします。

    補間係数

    このデータ系列の補間は量であり、補間が多いほど、ポリラインは滑らかになります。 このパラメーターは、近似カーブが有効になった後にのみ有効になります。

    このデータ系列ポリラインの線幅。

[データ] タブ

image

設定フィールドの説明

項目

説明

x

折れ線グラフのx軸の値。 フィールドのタイプと形式は、構成項目のx軸のラベルのデータ型と形式と一致している必要があります。

z

折れ線グラフのz軸の値。 このフィールドのタイプと形式は、構成アイテムのz軸上のラベルデータのタイプと形式と一致している必要があります。

y

折れ線グラフのy軸の値。

s

シリーズの値。 設定項目seriesseries名の内容が空の場合、このフィールド値が使用されます。

機能

説明

制御モード

スイッチをオンにすると、アセットが初期化状態のときにデータは要求されません。 データは、コールバックIDまたはBlueprint Editorで設定されたメソッドを使用してのみ要求されます。 スイッチをオフにすると、自動更新を使用してデータを要求できます。 デフォルトでは、スイッチはオフになっています。

自動データ要求

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

データソース

[データソースの設定] をクリックします。 [データソースの設定] パネルで、データソースの種類とクエリコードを変更し、データソースの応答をプレビューして、応答結果を表示します。 詳細については、「資産データの設定」をご参照ください。

データフィルター

[データフィルタ] チェックボックスをオンにすると、データ構造の変換、データのフィルタリング、および簡単な計算を実行できます。 [フィルターの追加] をクリックします。 [データソースの設定] パネルで、データフィルタースクリプトを設定します。 詳細については、「フィルター手順」をご参照ください。

データ応答結果

データ要求に対する応答。 データソースが変更された場合は、右側の刷新图标 アイコンをクリックして、応答結果をリアルタイムで表示できます。

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

このウィジェットはインタラクションイベントをサポートしていません。

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

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

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

  3. Blueprint Editorで、[ノードのインポート] ペインで [3Dラインチャート] ウィジェットをクリックします。 キャンバスでは、次の図に示すように、3D折れ線グラフのパラメーターを設定できます。 三维折线图蓝图参数

    • イベント

      イベント

      説明

      インターフェイス記述要求が完了したとき

      イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。

      インターフェイス記述リクエストが失敗した場合

      データインターフェイス要求が失敗したときに返され (ネットワークの問題やインターフェイスのエラーなど) 、フィルターによって処理されるイベント。 イベントは、処理されたJSONデータもスローします。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。

    • Action

      Action

      説明

      リクエストAPIの説明

      このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、3D折れ線グラフの場合、APIデータソースはhttps:// api.testで、リクエストインターフェイスで説明されるアクションに転送されるデータは { id: '1'} です。 最終的なリクエストインターフェイスはhttps:// api.test?id=1です。

      インポートインターフェイスの説明

      ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。

      コンポーネント設定の更新

      ウィジェットのスタイル設定は動的に更新されます。 この操作を実行する前に、キャンバスエディターでウィジェットをクリックし、右側のパネルの [設定] タブをクリックし、設定をコピーして...ウィジェット設定を取得します。 その後、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"
            }
          }