DataV:マーキー

コンポーネントの概要

マーキーは、視覚化アプリケーションでオーバーフローテキストを右から左に動的にスクロールするように設計されたテキストウィジェットです。

シナリオ

マーキーは通常、ユーザーの注意を引くために、リマインダー通知やライブコメントなどの視覚化アプリケーションで重要なテキスト情報を強調表示するために使用されます。

エフェクト表示

• 単一行テキスト

• 複数行のテキスト

前提条件

• テンプレート、空白のキャンバスを使用した作成をサポートするデータダッシュボードが利用可能です。

  .

• ビジネスデータはすぐに使用できます。 詳細については、「Datasource」をご参照ください。

マーキーを追加する

1. DataVコンソールにアクセスします。

2. Workbench > > すべてのアプリケーション> > データダッシュボードに移動し、キャンバス編集ページにアクセスするダッシュボードを選択します。

3. 左側のナビゲーションウィンドウで、[ウィジェットライブラリ] > [情報] リストの下にある [マーキー] ウィジェットをクリックしてキャンバスに追加します。

グローバル検索を使用して、関連するウィジェットを見つけて追加することもできます。

ビジネスデータの統合

ウィジェットを追加したら、準備したビジネスデータを統合して表示します。 マーキーをクリックし、右側の [データソース] タブで、レンダリングするウィジェットのデータを選択します。

• マーキーが受け入れるデータフィールドの概要を以下に示します。

  項目	説明
  値	ウィジェットによって表示される動的テキストコンテンツ。 表示用に1つの値の読み取りのみをサポートします。 複数の値がある場合、最初の値はデフォルトで読み取られます。 改行に <br> タグを使用できます。

  マーキーのデータ構造とサンプル表示を次に示します。

  [
    {
      "value": "DataV-Board is a professional data dashboard building tool. <br>You can use DataV-Board to create your own large screen!"
    }
  ]

  

• データソースの主な設定項目は次のとおりです。

  設定アイテム	説明
  データソースの選択	CSVファイル、API、さまざまなデータベースなど、さまざまな種類のデータの統合をサポートします。 詳細については、「Datasource」をご参照ください。 ビジュアルテーブルまたはコードを使用してデータフィールドを編集できます。
  フィルターの設定 (オプション)	データ構造変換、フィルタリング、表示、および簡単な計算を実現するためにフィルタコードをカスタマイズするために使用されます。 詳細については、「データフィルターの管理」をご参照ください。
  データマッピングの設定	選択したデータソースのフィールドをウィジェットの対応するフィールドにマッピングして、リアルタイムのデータマッチングを実現します。 アイコンをクリックして、フィールドスタイルを設定します。
  レスポンス結果の表示	ウィジェットに統合されたデータをリアルタイムで表示するために使用します。 ウィジェットデータソースが変更されると、最新のデータがここに表示されます。 データ応答結果をクリックして、書き込まれたデータフィールドのコードを表示します。 をクリックして例を表示し、データソースが受信した配列タイプとコード例を表示します。 この例を参照して、関連フィールドを記述できます。 その他のデータ要求設定: [読み込み状態の無効化] を選択すると、データダッシュボードの更新またはプレビュー時にウィジェットの初期化中の読み込みコンテンツは表示されません。 制御モード: 選択すると、ウィジェットは初期化状態でデータを要求しません。 現時点では、データ要求は、ブループリントエディタまたはグローバル変数イベントを介してのみ開始できます。 自動更新リクエスト: 選択すると、プラットフォームは設定したポーリング時間に従ってデータを動的にポーリングおよび更新します。 選択しない場合は、手動でページを更新するか、ブループリントエディターとグローバル変数イベントを使用してデータを更新するリクエストをトリガーする必要があります。

マーキーの設定

マーキーウィジェットを設定するには、マーキーウィジェットをクリックし、右側のパネルを使用して、基本スタイル、インタラクションの発生、およびブループリントのインタラクションを設定します。

[
  {
    "value": "Text content"
  }
]

    {
      // Movement method. Absolute positioning: to, relative positioning: by. Default value: to.
        "positionType": "to",
      // Specified position. x-coordinate, y-coordinate.
      "attr": {
        "x": 0,
        "y": 0
      },
      // Animation method.
      "animation": {
        "enable": false,
        // Animation delay.
        "animationDuration": 1000,
        // Animation curve. Optional values are: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
      }
    }

{
  "animationType": "fade",
  "animationDuration": 1000,
  "animationEasing": "linear"
}