Word cloud

Chart style

The word cloud widget lets you customize the text content, color, and shape. It supports multi-series color configuration and maps text size based on weight values. You can use a word cloud to visualize large amounts of text data.

Configuration panel

• Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. 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.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • 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.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 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.

• Shape

  Parameter	Description
  Chart Margin	Click the icon to show or hide the chart margin. If you turn on the switch, you can configure the distance between the word cloud area and the top, bottom, left, and right borders of the widget. The default unit is px.
  Shape	Sets the shape in which the words are displayed. Options include Ellipse, Rectangle, and Custom. Note If you select Custom, you can specify an image URL or a Base64 string in the Shape configuration item below. The words in the word cloud are rendered only in the dark areas of the image. Light areas, such as white regions, are not rendered. If you use an image URL, the image size should not be too large to avoid long loading times.
  Color	The color of the words in the word cloud. For more information, see Use the color mapper to configure the mapping between words and colors.
  Word Style	The style of the words, including the font, font weight, minimum font size, maximum font size, the margin between the words and the widget border, and whether to keep the word positions fixed.

• Animation: Specifies the animation effect for the word cloud.

  Parameter	Description
  Enable Animation	Turn on the switch to configure animation effects for the word cloud.
  Animation Effect	The type of animation effect. The system provides various common animation effects, such as Fade In with Zoom and Slide In. This can be configured only after you enable animation.
  Animation Duration	The duration of the animation effect in milliseconds (ms). This can be configured only after you enable animation.

• Interaction: Specifies the interaction effects for the word cloud widget.

  • Tooltip: Configures the style of the tooltip that appears when you hover over or click a word in preview or publish mode. Click the icon to enable or disable the tooltip.

    Parameter	Description
    Mode	The tooltip mode. Options include Simple and Standard.
    Trigger Method	The method to trigger the tooltip. Options include Hover and Click.
    Title Spacing	The distance between the tooltip title and other content in pixels (px).
    Tooltip Title	The text content of the tooltip title. Click the icon to enable or disable the tooltip title style.
    Title Style	The style of the tooltip title, including the font, font weight, font size, and color.
    Content Display	Click the or icon to add or delete a content display series for the tooltip. Click the or icon to configure the arrangement of multiple content display series. Click the icon to copy the current series configuration and add a new series with the same configuration. Field Name: The field name for the tooltip content. It must match a field in the data panel. Display Name: The display name for the tooltip content. Prefix and Suffix: The prefix and suffix for the tooltip content.
    Number Format	Select a number format for the value field.
    Content Spacing	The distance between content items in the tooltip.
    Content Text	The style of the content text in the tooltip, including the font, font weight, font size, and color.
    Popup Background	The background style of the tooltip popup. Background Margin: The horizontal and vertical margin values for the tooltip popup background. Background Color: The background color of the tooltip. Border Style: The style of the tooltip border, including the line type, border radius, line width, and border color.

  • Selected State: Configures the style of a word when it is selected. Click the icon to enable or disable the selected state style.

    Parameter	Description
    Trigger Method	The method to trigger the selected state. Options include Hover and Click.
    Selection Method	The method to select words. Options include Single and Multiple.
    Word Color	The color of the word in the selected state. Click the icon to enable or disable the word color style.
    Word Outline	The style of the word outline, including the line type, line width, and outline color. Note If you select Dashed or Dotted for the line type, you can also configure the dash length and the distance between dashes.

• Legend: Configures the style of the word cloud legend.

  Parameter	Description
  Enable Legend	Turn on the switch to configure the legend style. Turn off the switch to disable it.
  Legend Position	The position of the legend relative to the widget's origin. Options include 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, font weight, font size, and color of the legend text.
  Chart Spacing	The horizontal and vertical spacing between the legend and the chart.
  Categorical Legend	The style of the categorical legend. Legend Marker: The shape and size of the legend markers. Legend Spacing: The horizontal and vertical distance between different legend items. Max Width: Sets the maximum width of the legend in pixels (px). Allow Pagination: Turn on the switch to enable legend pagination. You can configure the style of the page numbers and arrows when the legend has too many items to display on one page. If you turn off the switch, all legend items are displayed on a single page. Max Rows: The maximum number of rows for the legend. If the number of rows exceeds this value, the legend will be paginated. Page Number Style: The style of the page numbers, including the font, font weight, font size, and color. Arrow Style: The size of the arrows for pagination, and the default and disabled colors of the arrows.

• Conditions: Configures the styles for data condition series.

  Data Condition Series: Click the or icon to add or delete a data condition series. Click the or icon to configure the arrangement of multiple data condition series. Click the icon to copy the current series configuration and add a new series with the same configuration. For more information about the configuration, see Use the condition tree.

  Change Color: Enable this option to configure the word color for this condition series.

Data panel (default mode)

Field configuration

Table 1. Parameters

Parameter	Description
Controlled Mode	If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data Request	After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data Source	In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data Filter	If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response Result	The response to a data request. If the data source changes, you can click the icon next to Data Response Result to view the data response in real time.

Data panel (analysis mode)

For more information about the BI analysis data configuration panel, see Introduction to the data panel in BI analysis mode.

Field configuration

Interaction panel

Interactions

Blueprint editor interaction configuration

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.

3. On the blueprint editor configuration page, click the Word Cloud widget in the imported nodes pane. The configuration parameters for the word cloud appear on the blueprint editor canvas, as shown in the following figure.

   • Events

     Event	Description
     On Data API Request Completion	This event is triggered when the data API request is successful and the response is processed by the filter. This event returns the processed data in JSON format. For an example of the data, see the Data Response area on the Data tab of the widget's configuration panel in the canvas editor.
     When the data API request fails	This event is triggered when the data API request fails. This can be due to network issues, API errors, or an error that occurs after the response is processed by a filter. This event returns the error information in JSON format. For an example of the data, see the Data Response area on the Data tab of the widget's configuration panel in the canvas editor.
     When a data item is selected	This event is triggered when you click a word in the word cloud. This event returns the data item that corresponds to the clicked word.
     When a legend item is clicked	This event is triggered when you click a legend item in the word cloud. This event returns the data item that corresponds to the clicked legend item.

   • Actions

     Action	Description
     Request data API	Requests data from the server-side again. Data from input data processing nodes or layer nodes is used as parameters. For example, if a word cloud's API data source is https://api.test and the data passed to the Request data API action is { id: '1'}, the final API request is https://api.test?id=1.
     Import data API	Processes data in the format required by the component, then imports the data to redraw the component. This action does not request new data from the server. For a data example, see the Data Response area on the Data tab in the component's configuration panel in the canvas editor.
     Highlight	Highlights the element corresponding to the data item. See the data example below. return { "data": { "x": data.x, // The data item to highlight "colorField": data.colorField }, "style": { "fillStyle": "#f00" // The fill color } }
     Reset selections	Clears and resets the component's selection data. No parameters are required.
     Update component configuration	Dynamically updates the component's style configuration. First, go to the component's Configuration panel and click Copy Configuration to Clipboard to get the configuration data. Then, in the data processing node on the blueprint editor's configuration page, change the field values for the styles as needed.
     Show	Shows the component. See the data example below. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the component. See the data example below. return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle visibility	Toggles the component's visibility between shown and hidden. See the data example below. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the component to a specified position. See the data example below. return{ // The movement method. Absolute positioning: to. Relative positioning: by. Default value: to. "positionType": "to", // The specified position. The x- and y-coordinates. "attr": { "x": 0, "y": 0 }, // The animation method. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation curve. Optional values: linear, easeInOutQuad, or easeInOutExpo. "animationEasing": "linear" } }