Word cloud

Chart style

A word cloud displays text sized by weight values. You can customize text content, color, drawing shape, and multi-series color mappings.

Style Panel

• Search Configuration: Click the icon in the upper-right corner of the Style panel to search for configuration items by name. Fuzzy match is supported. Search configuration items.

  • Size: the width and height of the widget, in pixels.

  • Positioning: the x-axis and y-axis position of the widget, in pixels. X-coordinate is the pixel distance from the upper-left corner of the widget to the left edge of the canvas. Y-coordinate is the pixel distance from the upper-left corner of the widget to the top edge of the canvas.

  • Rotate: rotates the widget around its center, in degrees.

    • Enter the rotation angle directly, or click the plus (+) or minus (-) sign to adjust the value.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: a value from 0 to 1. 0 hides the widget, and 1 displays it fully. Default value: 1.

• Graphics

  Metric	Description
  Chart Margins	Toggle the icon to show or hide chart margins. When enabled, you can set the distance between the word cloud area and each edge of the widget, in pixels.
  Shape	The shape in which words are arranged. Valid values: Ellipse, Rectangle, and Custom. Note If you select Custom, enter an image URL or base64 string in the Graphics field. Words render only in the dark areas of the image; light areas such as white regions are not rendered. Keep image sizes small to avoid long load times.
  Color	The color of words in the word cloud. Color mapper instructions.
  Word Style	The word style, including font, font weight, minimum and maximum font size, word spacing, and whether to lock word positions.

• Animation: the animation effect of the word cloud.

  Metric	Description
  Animation Switch	Turn on the switch to configure animation effects.
  Animation	The animation type, such as Zoom and Fade. Available only when animation is enabled.
  Animation Duration	The duration of the animation, in milliseconds. Available only when animation is enabled.

• Interactive: interactive effects for the word cloud widget.

  • dialog box: the style of the dialog box that appears when you hover over or click a word on the preview or publish page. Click the icon to enable or disable the dialog box.

    Metric	Description
    Mode	The display mode of the dialog box: concise or general.
    Trigger	The trigger method for the dialog box. Valid values: Hover and Click.
    Title Spacing	The spacing between the title and other content in the dialog box, in pixels.
    dialog box Title	The title text of the dialog box. Click the icon to enable or disable the title.
    Title Style	The title style in the dialog box, including font, weight, size, and color.
    Content Display	Click the or icon to add or remove a content series. Click the or icon to reorder series. Click the icon to duplicate a series. Field Name: the field name in the dialog box. Must match the field in the data panel. Display Name: the display name of the content in the dialog box. Prefix: the prefix and suffix of the content.
    Numeric Format	The numeric format applied to the value field. Data display format.
    Content Spacing	The spacing between content items in the dialog box.
    Content Text	The content text style in the dialog box, including font, weight, size, and color.
    Pop-up background	The background style of the dialog box. Background Margin: the horizontal and vertical margins of the dialog box background. Background Color: The background color of the dialog box. Border Style: the border style of the dialog box, including line type, corner radius, line width, and line color.

  • Selected State: configures the selected state. Click the icon to enable or disable.

    Metric	Description
    Trigger	The trigger mode for word selection: Hover or Click.
    Select Method	The selection method: Single Choice or Multiple Choice.
    Word Color	The color of selected words. Click the icon to enable or disable.
    Word Stroke	The stroke line style, including line type, thickness, and color. Note When the line type is dotted line or dotted line, you can also configure the dash length and gap between dashes.

• Legend: the legend style of the word cloud.

  Metric	Description
  Legend Switch	Turn on the switch to configure legend styles.
  Legend Position	The position of the legend relative to 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, weight, size, and color of the legend text.
  Chart Spacing	The horizontal and vertical spacing between the legend and the chart.
  Category Legend	The style of category legends. 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: when enabled, configures page number and arrow styles for the legend. When disabled, all legend content displays on a single page. Maximum Number of Rows: the maximum rows displayed in the legend. Rows beyond this limit are paginated. Style: the page number style, including font, weight, size, and color. Arrow Style: the size, default color, and disabled color of the arrows in the page-turning style.

• Condition: configures data condition series.

  Data Condition Series: Click the or icon to add or remove a condition style. Click the or icon to reorder condition styles. Click the icon to duplicate a condition style. Condition tree usage.

  Graph Color: turn on the switch to override word colors for 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	Triggered after a data interface request is completed and processed by a filter, with the resulting JSON data. For data examples, see the Data Response Result section of the Data Source tab in the canvas editor.
     When a data item is selected	Triggered when a word in the word cloud is clicked, emitting the corresponding data item. { "name": "Arabian Nights", "value": "7.8", "colorField": "Popular" }
     When the legend is clicked	Triggered when the word cloud legend is clicked, emitting the corresponding data item. { "value": "A popular movie", "checked": true // Specifies whether to check the value. The value is true or false. }

   • Action

     Action	Description
     Import data	Imports pre-processed data for redrawing without re-requesting the server. [ { "name": "Arabian Nights", "value": "7.8", "colorField": "Popular" } ]
     Request Data Interface	Re-requests server data, using data from an upstream node as parameters. 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 URL 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: the highlight style, such as fillStyle, stroke, and opacity. If omitted, the default style is used. Reference data example { "data": { "name": data.name }, "style": { "fillStyle": "#fff" } }
     Reset selections	Clears all selected items. No parameters required.
     Move	Moves the widget to a specified location. { // 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	Toggles widget visibility. No parameters required.
     Display	Shows the widget. { "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	Hides the widget. { "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	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to get the widget configuration data, then modify the style fields in Blueprint Editor.