DataV:Display query results on a word cloud

Chart style

A word cloud allows you to customize the content, color, and drawing shape of text. You can configure multiple colors and map text sizes based on weight values. This way, you can display a large amount of text in the form of a word cloud on a dashboard.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget. Unit: pixels.

  • Positioning: the x-axis and y-axis of the component. Unit: pixels. X-coordinate indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

  • Rotate: The widget is rotated around the center of the widget. Unit: degrees.

    • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: Valid values: 0 to 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

• Graphics

  Metric	description
  Chart Margins	Click the icon to control the display of the chart margins. If you turn on the switch, you can configure the distance between the word cloud area and the four boundaries of the widget. Unit: px by default.
  Shape	Sets the style of the entry evenly displayed in the image shape. Valid values: Ellipse, Rectangle, and Custom. Note If you select Custom, you can customize an image URL or base64 in the Graphics configuration items. The words in the word cloud only render the dark parts of the image. Light-colored parts such as white areas are not rendered. When the URL of an image is used, the size of the image should not be too large. Otherwise, the image takes too long to load.
  Color	For more information about the color of words in the word cloud, see Color mapper instructions.
  Word Style	The style of the word, including the font style, font weight, minimum font size, maximum font size, margin of the word distance component, and whether to keep the word position unchanged.

• Animation: the animation effect of the word cloud.

  Metric	description
  Animation Switch	Turn on the switch to configure the animation effect of the word cloud.
  Animation	The type of the animation. The system provides a variety of common animation effects, including Zoom and Fade. You can configure only after you turn on Animation.
  Animation Duration	The duration of the widget animation effect. Unit: ms. This value is configurable only after you turn on the Animation switch.

• Interactive: the interactive effect of the word cloud widget.

  • dialog box: the style of the dialog box that appears when you move the pointer over or click a word on the preview or publish page. Click the icon to turn the dialog box on or off.

    Metric	description
    Mode	dialog box chart mode, optional, including concise and general.
    Trigger	The method by which the dialog box is triggered. Valid values: Hover and Click.
    Title Spacing	The distance between the title and other content in the dialog box. Unit: px.
    dialog box Title	dialog box the text content of the title. Click the icon to turn the dialog box title style on or off.
    Title Style	The style of the title in the dialog box, including the font style, text weight, font size, and color of the title.
    Content Display	Click the or icon on the right to add or delete a dialog box content series. Click the or icon to configure the arrangement style of multiple dialog box content display series. Click the icon to copy the current dialog box content display series configuration and add a dialog box content display series with the same configuration. Field Name: the name of the field in the dialog box. The name must match the field in the data panel. Display Name: the display name of the dialog box content. Prefix: the prefix and suffix of the dialog box content.
    Numeric Format	Select the numeric format that takes effect for the value field. For more information, see Data display format.
    Content Spacing	The distance between content in the dialog box.
    Content Text	The style of the content text in the dialog box, including the font style, text weight, font size, and color.
    Pop-up background	dialog box pop-up background style. Background Margin: dialog box the horizontal and vertical margins of the pop-up background. Background Color: The background color of the dialog box. Border Style: dialog box the style of the border, including the border line type, rounded corner size, line width size, and border line color.

  • Selected State: the selected state. You can click the icon to enable or disable the selected state.

    Metric	description
    Trigger	The trigger mode of the selected word. You can select one of the following options: Hover and Click.
    Select Method	The method that is used to select the word. You can select Single Choice or Multiple Choice.
    Word Color	The color of the selected word. Click the icon to turn the word color style on or off.
    Word Stroke	The style of the stroke line, including the type of the stroke line, the thickness of the line, and the color of the stroke line. Note When the line type is selected as dotted line or dotted line, the value of the break length of the line and the distance between each break line can also be configured.

• Legend: the legend style of the word cloud.

  Metric	description
  Legend Switch	If you turn on the switch, you can configure the legend style. If you turn off the switch, you cannot configure the legend style.
  Legend Position	The position of the legend relative to the start coordinates of the widget. Valid values: Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right, Left Top, Left Center, Left Bottom, Right Top, Right Center, and Right Bottom.
  Text Style	The font style, text weight, font size, and color of the legend text.
  Chart Spacing	Sets the horizontal and vertical spacing between the legend and the chart.
  Category Legend	The style of the sub-type legend. Legend Marker: the size and shape of the legend marker. Legend Spacing: the horizontal and vertical distance between the legends of different categories. Maximum Width: the maximum width of the legend. Unit: pixels. Page Flip Allowed: If you turn on the switch, the page number style and arrow style of the legend are enabled. If you turn off the switch, the legend content is displayed on one page and cannot be flipped. Maximum Number of Rows: the maximum number of rows that can be displayed in the legend. If the maximum number of rows is exceeded, the legend is paged. Style: the style of the page number, including the font, weight, font size, and color of the page number. Arrow Style: the size, default color, and disabled color of the arrows in the page-turning style.

• Condition: the description of the data condition series.

  Data Condition Series: Click the or icon to add or remove a condition style. Click the or icon to configure the arrangement style of multiple conditional styles. Click the icon to copy the selected conditional style configuration and add a conditional style. For more information, see Condition tree usage.

  Graph Color: If you turn on the switch, you cannot configure the color of words in the specified condition style. If you turn off the switch, you cannot configure the color of words in the specified condition style.

Data Sources panel

Advanced Panel

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Description
     When the data interface request is completed	The event is triggered with the processed JSON data after a data interface request is responded and processed by a filter. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
     When a data item is selected	The event that is raised when a word in a word cloud is clicked. The event also raises the data item corresponding to the word. For more information, see the sample data. { "name": "Arabian Nights", "value": "7.8", "colorField": "Popular" }
     When the legend is clicked	The event that is raised when the legend of the word cloud is clicked, and the data item corresponding to the word is also raised. For more information, see the data example. { "value": "A popular movie", "checked": true // Specifies whether to check the value. The value is true or false. }

   • Action

     Action	Description
     Import data	After data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. You do not need to request server data again. For more information, see the data example. [ { "name": "Arabian Nights", "value": "7.8", "colorField": "Popular" } ]
     Request Data Interface	This action is performed to request the server data again. The data sent by an upstream data processing node or layer node is used as a parameter. For example, if the API data source is https://api.test and the data passed to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.
     Highlight	data: the data item to be highlighted. Single highlight { 'name': 'Cat and Mouse 1992 Movie Edition' } Bulk Highlight [ { 'name': 'Taibai Mountains' }, { 'value': 8.4 } ] style: Select a style. such as fillStyle, stroke, and opacity. If you do not specify the highlight style, the default style is used. Reference data example { "data": { "name": data.name }, "style": { "fillStyle": "#fff" } }
     Reset selections	Clear the selection item data of the reset component. No parameters are required.
     Move	Move a widget to a specified location. For more information, see the data example. { // 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 animation delay. Unit: milliseconds. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch Show /Show	Specifies whether to show or hide a widget. No parameters are required.
     Display	Display the widget. For more information, see Data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hide the component. For more information, see Data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Style configurations of widgets are dynamically updated. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data of the widget. After that, change the style field for the data processing node in Blueprint Editor.