すべてのプロダクト
Search

このプロダクト

    DataV:ティッカーボード付きエリアチャート

    ドキュメントセンター

    DataV:ティッカーボード付きエリアチャート

    最終更新日:Jul 17, 2024

    このトピックでは、ティッカーボードを使用した面グラフのグラフスタイルと構成パネルについて説明します。

    チャートスタイル

    ティッカーボード付きのエリアチャートは折れ線グラフです。 面グラフチャートと比較して、ティッカーボード付きの面グラフは、複数の一連のティッカーボード、カスタムy軸間隔、および複数のシリーズデータ構成をサポートします。 線と領域の組み合わせを使用して、多次元のリアルタイムデータの変化傾向をインテリジェントに表示できます。

    image..png

    設定パネル image..png

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

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

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

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

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

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

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

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

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

    • チャート image..png

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

      • 空のデータ: スイッチをオンにすると、線はy軸の値が0の点を通過します。

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

      • ティッカーボード: さまざまな距離でのフリップのスタイル。

        パラメーター

        説明

        左マージン

        チャートの左端からフリップまでの距離。

        右マージン

        チャートの右端からのフリップの距離。

        パディング

        フリップとフリップの間の距離。

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

        パラメーター

        説明

        テキスト

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

        レイアウト

        凡例間の位置関係。

        • パディング

          • 水平パディング: 隣接する凡例の左右の距離。 この設定項目は、複数のシリーズがある場合にのみ有効です。

          • 垂直パディング: 凡例とウィジェットの上下の境界との間の距離。

        • 位置: ウィジェットの開始座標に対する凡例の位置。 有効な値: Top Left、Top Center、Top Right、Bottom Left、Bottom Center、Bottom Right。

    • 座標軸: X軸またはY軸を選択できます。

      • X軸 image..png

        • 軸を表示: スイッチをオンにすると、ウィジェットのx軸スタイルが正常に表示され、x軸スタイル設定が表示されます。 スイッチをオフにすると、ウィジェットのx軸スタイルが非表示になり、スタイル設定が表示されなくなります。

        • データ型: x軸ラベルデータのタイプ。 有効な値: Number、Category、Time。

          パラメーター

          説明

          数値

          整数や浮動小数点数などの数値データをサポートします。

          カテゴリ

          文字や文字列などのカテゴリタイプのデータがサポートされています。

          時間

          時間タイプのデータは、データ形式を設定する必要があります。

        • データ形式: データ表示形式で、Timeのデータのみに有効です。% Y/% m/% d % H:% M:% S形式を参照して設定してください。

        • 左と右のマージン: スペースの両端間の距離。 有効な値は 0～1 です。

        • 間隔: x軸上の2つのカテゴリ間の間隔の割合。 値が大きいほど、パーセンテージが大きいことを示す。 有効な値は 0～1 です。

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

          パラメーター

          説明

          最大値

          x軸の最大値。 カスタム入力がサポートされています。 デフォルト値はautoです。 システムは、タグの最大値、最小値、および数に基づいて一致を自動的に計算します。

          最小値

          x軸の最小値。 カスタム入力がサポートされています。 デフォルト値はautoです。 システムは、タグの最大値、最小値、および数に基づいて一致を自動的に計算します。

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

          説明

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

          パラメーター

          説明

          データフォーマット

          表示するデータ形式。 このパラメーターは、時間ベースおよび数値データに対してのみ有効です。 % m/% d % Y % H:% M:% S時間、整数参照dおよび浮動小数点参照 .1fを参照してください。

          テキスト

          x軸ラベルのテキスト (フォントスタイル、フォントサイズ、フォントの色、フォントの太さなど) 。 詳細については、「カラーピッカーの説明」をご参照ください。 テキストの色を変更します。

          ラベル表示

          x軸ラベルの表示スタイルは次のとおりです。

          • オフセット: x軸上のラベル間の距離。 単位: ピクセル。

          • 角度: x軸ラベルの角度。 有効な値: 水平、傾斜、および垂直。

          • 数量: x軸上のラベルの数。

          • 軸単位: x軸ラベルの単位。

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

          色: x軸の色。

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

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

      • Y軸 image..png

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

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

          パラメーター

          説明

          最小値

          y軸の最小値。 値をカスタマイズするか、値を選択できます。

          • 0; システムのデフォルト最小値は0です。

          • 自動: システムは、軸ラベルの最大値、最小値、および数に基づいて値を自動的に計算します。

          • Data Min: データの最小値。

          最大値

          y軸の最大値。 値をカスタマイズするか、値を選択できます。

          • 自動: システムは、軸ラベルの最大値、最小値、および数に基づいて値を自動的に計算します。

          • Data Max: データの最大値。

        • データ形式: y軸ラベル値の表示形式。 デフォルト、11 (整数) 、11.1 (フロート) 、11.11 (フロート) 、11% 、11.1% 、または11.11% を選択できます。

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

          パラメーター

          説明

          テキスト

          y軸ラベルテキストのフォントスタイル、テキストの太さ、フォントサイズ、色。

          ラベル表示

          ラベルの数、単位、およびラベルが配置される角度。 [水平] 、[斜め] 、または [垂直] を選択できます。

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

          色: y軸の色。

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

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

    • シリーズ image..png

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

      説明

      設定項目は、複数の系列に対して設定できる配列です。 エディタは、データが1つ以上の直列構成ループを介してレンダリングされるように、データをトラバースする。 一部のデータを特定のスタイルにカスタマイズする必要がある場合は、データを手動でソートする必要があります。

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

      • Line: シリーズのラインのスタイル。

        パラメーター

        説明

        幅

        ラインの太さの値。

        カーブタイプ

        回線のタイプ。 バルブ滑らかな曲線とポリライン。

        スタイル

        ポリラインのスタイル。 [Solid] 、[Dotted] 、または [Dashed] を選択できます。

        カラー

        ポリラインの色。

      • Point: ライン内のドットの半径と色。 アイコンをクリックして开关图标、ドットの外観と隠蔽を制御できます。

      • エリア: 線で覆われているエリアの色。 アイコンをクリックして开关图标、エリアの色を制御できます。

      • 値ラベル: 系列内のポリラインの値ラベルのスタイル。 アイコンをクリックし开关图标て、ポリラインラベルの値を表示するか非表示にするかを制御できます。

        パラメーター

        説明

        テキスト

        このシリーズの下の値ラベルのテキストスタイル (テキストフォント、テキストの太さ、フォントサイズ、色など) 。

      • ティッカーボード: このシリーズのカードフリップスタイル。 カードフリップは、デジタルデータの動的変化を示すために使用されるコンポーネントです。 これは一般に、プレフィックス、番号、およびサフィックスの3つの部分で構成されます。

        説明

        ティッカーボードに表示される数字は、シリーズポリラインの最後のポイントに対応するy軸の値です。 したがって、データを設定することで、デフォルトの数値表示値を変更できます。

        • プレフィックスとサフィックス: タグのプレフィックスとサフィックス。 タグのプレフィックスとサフィックスをカスタマイズできます。

        • プレフィックス: テキストフォント、テキストの太さ、フォントサイズ、色など、プレフィックスが付いたテキストのスタイル。

        • Number: フリップボックス内の数字のスタイル。

          • Text: テキストフォント、テキストの太さ、フォントサイズ、色など、番号のテキストスタイル。

          • 表示: 数字と背景色の間の距離。

          • デフォルトの桁数: 桁数。

          • 千の区切り文字: データビット数が4より大きい場合、システムはデフォルトの区切り文字を使用して表示番号の区切り文字をカスタマイズできます。

          • 10進数: スイッチをオンにすると、システムはビジュアライゼーションアプリケーションに丸められた整数を表示します。 スイッチをオフにすると、システムは小数を処理する代わりに小数を表示します。

        • 接尾辞: テキストフォント、テキストの太さ、フォントサイズ、色など、接尾辞のテキストスタイル。

        説明

        フリップボックスの左上隅にある数値は、明示的 /暗黙的な変換をサポートしていません。 左上隅に数字を表示する必要がない場合は、接頭辞と接尾辞の内容を空のままにして、テキストのフォントサイズを0に変更できます。

    • その他

      • Easing Animation: チャートのアニメーション効果スタイル。 アイコンをクリックすると开关图标、アニメーション効果を有効または無効にできます。 image..png

        パラメーター

        説明

        アニメーション設定

        • 食べる効果: アニメーションのイージング効果。 このシステムは、さまざまな共通の緩和効果を提供します。

        • すべてのシリーズのアニメーション: スイッチをオンにすると、各シリーズのアニメーションが順番に再生されます。 スイッチをオフにすると、すべてのシリーズのアニメーションが一緒に再生されます。

        入り口アニメーション

        コンポーネントによってレンダリングされる最初のアニメーションの期間。 単位：ms。

        更新アニメーション

        • データ更新の期間: ウィジェットデータが更新されたときのアニメーションの期間。 単位：ms。

        • 最新のステータスから更新: スイッチをオンにすると、ウィジェットデータが更新されたときの前の位置からアニメーションが開始されます。 スイッチをオフにすると、ウィジェットデータが更新されたときの初期位置からアニメーションが開始されます。

      • ツールチップ: ページをプレビューまたは公開したときに表示されるダイアログボックスのスタイル、ポインターを上に移動するか、ポリライン上のドットをクリックします。 アイコンをクリックし开关图标て、ダイアログボックスの効果をオンまたはオフにできます。 image..png

        パラメーター

        説明

        トリガーモード

        • トリガーアイテムの種類: トリガーするターゲットの種類を示します。 このフィールドはオプションで、ItemとAxisを含みます。

        • トリガーアクション: トリガーするアクションのダイアログボックス。 このフィールドはオプションで、[ホバー] と [クリック] を含みます。

        テキストスタイル

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

        フェード遅延

        トリガー条件が満たされない場合、ダイアログボックスは消えます。 この設定項目は、ダイアログボックスが消えるまでの遅延時間をms単位で設定します。

        背景ボックス

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

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

        • ディメンション: ダイアログボックスの幅と高さ。 単位: ピクセル。 アイコンをクリックし开关图标て、カスタムダイアログボックスをオンまたはオフにします。

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

        • オフセット

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

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

        • 国境

          • 枠の幅: ダイアログボックスの枠の太さ。 単位: ピクセル。

          • 枠の色: ダイアログボックスの枠の色。

    データパネル

    image..png

    設定フィールドの説明

    パラメーター

    説明

    x

    コンポーネントポリライン内の各ドットのカテゴリ、つまりx軸の値。 フィールドの種類と形式は、構成項目のx軸のデータ型と形式と一致している必要があります。

    y

    ウィジェット行の各ドットの値、つまりy軸の値。

    s

    オプションです。 シリーズの値。 このフィールド値は、設定項目data seriesのseries nameが空の場合に使用されます。

    表1. パラメーター

    パラメーター

    説明

    制御モード

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

    自動データ要求

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

    データソース

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

    データフィルター

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

    データ応答結果

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

    相互作用パネル image..png

    ウィジェット間のインタラクションを有効にするには、[有効化] チェックボックスをオンにします。 ティッカーボードドットのあるエリアチャートをクリックすると、データリクエストがトリガーされ、コールバック値がスローされて、異なるドットのデータが動的にロードされます。 デフォルトでは、x、y、sの値が返されます。 詳細については、「ティッカーボードのコールバックIDの設定」をご参照ください。

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

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

    2. ページのBlueprint Editor icon左上隅にあるアイコンをクリックします。

    3. Blueprint Editorで、[追加されたノード] ペインで [エリアチャート] をクリックします。 次の図に示すように、キャンバスでティッカーボードパラメータを使用してエリアチャートを表示できます。 区域翻牌器蓝图参数

      • イベント

        イベント

        説明

        データインタフェース要求の完了時

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

        データインタフェース要求の失敗

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

        データ項目のクリック時

        ドットに対応するデータ項目とともに、ティッカーボードのドットが表示されたエリアチャートをクリックしたときに発生するイベント。

      • Action

        Action

        説明

        要求データインタフェース

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

        インポートデータインタフェース

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

        ハイライト

        データ項目に対応する要素を強調表示します。 参照データの例を次に示します。 

        return {
  "data": {},
  "options": {
    "style": {
      "stroke": "#f00" 、
      "fill": ""
    },
    "selectMode": "single" 、
    "cancelHighlightFirst": false
  }
}

        ハイライトをキャンセル

        データ項目に対応する要素の強調表示をキャンセルします。 参照データの例を次に示します。 

        return {
  "data": {},
  "options": {
    "mode": "single"
  }
}

        クリアウィジェット

        コンポーネントの設定をクリアします。 パラメータは必要ありません。

        ウィジェット設定の更新

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