DataV:Multiple lines of text

Overview

The multiple lines of text widget is designed to display content spanning several lines, enhancing text information visibility. It supports interactions with other widgets, line breaks, and hyperlink insertion, allowing for customizable formatting and layout.

Scenarios

It is commonly used to present extended text content in visualization applications, including feature introductions, product descriptions, and annotations.

Effect display

• Static Text

  

• Dynamic Text

• Text with Links

  

• Interaction Scenario

Prerequisites

• A data dashboard has been created, supporting creation using a template, creation using a blank canvas.

• Business data has been prepared. For more information, see data source.

Add multiple lines of text

1. Access the DataV console.

2. In the Workbench> > All Applications> > Data Dashboard, click the target dashboard to enter the canvas editing page.

3. In the left-side navigation pane under the Widget Library > Information list, click the Multiple Lines of Text widget to add it to the canvas.

You can also use global search to add related widgets.

Integrate business data

After adding the widget, integrate the prepared business data for display. Click the multiple lines of text widget, and on the right-side Data Source tab, select the data to be rendered by this widget.

• The data fields received by the multiple lines of text widget are as follows.

  Field	Description
  value	The text content displayed by the widget supports some HTML tags (such as <a>, <br>). If not empty, it will overwrite the configuration in the style. If empty, it will use the content in the Style > Basic Style > Paragraph Content configuration item.

  The data structure and effect display of the example multiple lines of text are shown below.

  [
    {
      "value": "DataV-Board (data dashboard) is a data dashboard building tool under the DataV edition, aimed at helping users with different professional backgrounds quickly build professional-level data dashboards through a graphical interface. Whether facing innovative exploration of emerging digital twin scenarios or continuous deepening in traditional data scenarios, DataV-Board is committed to enabling users to efficiently and flexibly complete data viewing, analysis, and expression, solving the last mile problem of data scenarios with data visualization technology."
    }
  ]

  

• The key configuration items for the data source are as follows.

  Configuration Item	Description
  Select Data Source	Supports integrating various types of data such as CSV files, APIs, and various databases. For more information, see Data Source. You can edit data fields using a visual table or code.
  Configure Filter (Optional)	Used to customize filter code to achieve data structure transformation, filtering, display, and simple calculations. For more information, see Manage Data Filters.
  Configure Data Mapping	Used to map fields from the selected data source to the corresponding fields of the widget to achieve real-time data matching. Click the icon to configure field styles.
  View Response Results	Used to display the data integrated into the widget in real-time. When the widget data source changes, the latest data will be displayed here. Click the data response result to view the code of the data fields written. Click to view the example to see the array type and code example received by the data source. You can refer to the example to write related fields. Other data request configurations: Disable Loading State: When selected, the loading content during widget initialization will not be displayed when updating or previewing the data dashboard. Controlled Mode: When selected, the widget will not request data in the initialization state. At this time, data requests can only be initiated through the blueprint editor or global variable events. Automatic Update Request: When selected, the platform will dynamically poll and update data according to the polling time you set. If not selected, you need to manually refresh the page or trigger a request to update data through the blueprint editor and global variable events.

Configure multiple lines of text

Click the multiple lines of text widget to configure its basic style and interaction on the right-side panel, including advanced configuration and blueprint interaction settings.

[
  {
    "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, unit ms.
        "animationDuration": 1000,
        // Animation curve. Optional values are: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
      }
    }

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

Case demonstration

This case demonstrates obtaining content from the word cloud widget and displaying it in the multiple lines of text widget.

1. Add the widget to the canvas.

   1. Access the DataV console.

   2. Select any data dashboard, click Edit to enter the canvas editor.

   3. In the Widget Library > Information list in the left-side navigation pane, click Word Cloud and Multiple Lines of Text to add the widgets to the canvas.

2. Configure the scrolling style of multiple lines of text.

   Click Multiple Lines of Text on the canvas, and on the Interaction tab of the style panel, set the overflow method to uniform scrolling overflow with a speed of 0.05px/s.

3. Configure blueprint interaction.

   Scroll and display the text obtained from the word cloud in the multiple lines of text widget using blueprint interaction.

   1. Click the icon in the upper left corner of the page to enter the blueprint editor.

   2. On the Layer Node tab on the left, hover over the widgetand click the icon to add the widget to the main canvas.

      Perform this operation sequentially to add both the multiple lines of text and word cloud widgets to the main canvas.

   3. On the Logic Node tab on the left, hover over the serial data processing node and click the icon to add it to the main canvas.

   4. Connect the widgets as illustrated below to import the corresponding data into the multiple lines of text when the word cloud data updates.

      

   5. Click the serial data processing node to configure its processing method.

      return [{"value": data.map(item => item.name).join(',')}];  // Retrieve the name field information in the word cloud widget in sequence.

4. Click Preview in the upper right corner of the page to preview the display result.