Treemap chart

Chart style

A treemap chart is suitable for displaying data with a hierarchical structure. It intuitively shows comparisons between items at the same level. Compared with a traditional tree diagram, a treemap chart uses space more effectively and can show proportions.

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.

• Chart

  Parameter	Description
  Custom Margin	Click the icon to show or hide the custom margin. After you turn on the switch, you can configure the distance between the treemap chart area and the top, bottom, left, and right borders of the widget. The default unit is px.
  Nest Level	Set the maximum number of nest levels for the treemap chart.
  Value Label	Click the icon to show or hide the custom value labels. Set the font style, weight, size, and color of the value label text.
  Legend	Click the icon to show or hide the legend style of the treemap chart. Enable Paging: Turn on the switch to enable the legend paging feature. You can configure the page number and arrow styles for when the legend has too many items and needs to be displayed on multiple pages. Turn off the switch to display all legend items on one page without paging. Layout: The position of the legend relative to the starting coordinates of the widget. Options include Top Left, Top Center, Top Right, Bottom Left, Bottom Center, and Bottom Right. Legend Mark: Set the shape type and size of the legend marks in px. Legend Text: The font style, weight, size, and color of the legend text in the treemap chart.

• Series: Configures the styles for the data series in the treemap chart.

  Data Series: You can click the or icon on the right to add or delete a data series. You can click the or icon to configure the arrangement of multiple data series. You can click the icon to copy the configuration of the currently selected data series and add a new data series with the same configuration.

  Color: Specifies the color for each series.

• Level: Configures the styles for each level in the treemap chart.

  You can click the or icon on the right to add or delete a level series. You can click the or icon to configure the arrangement of multiple level series. You can click the icon to copy the configuration of the currently selected level series and add a new level series with the same configuration.

  Rectangle Style: Specifies the rectangle style for each level series, including the outline color, outline thickness, and opacity of the rectangle.

• Other: Configures the tooltip style for the treemap chart. The tooltip appears when you hover over or click a rectangle on the preview or published page. You can click the icon to enable or disable the tooltip.

  Parameter	Description
  Offset	Set the offset of the tooltip.
  Text Style	The style of the text in the tooltip, including the font style, weight, size, and color.
  Background Box Style	The style of the background box in the tooltip. Background Color: The color of the background box. Padding: The padding of the background box in px. Border: The thickness and color of the background box border.

Data template

Field description

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.

Interaction panel

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 Treemap Chart widget in the imported nodes bar. The configuration parameters for the treemap chart appear on the canvas.

   • Events

     Event	Description
     When the treemap chart API request is successful	This event is triggered after a data API request is returned and processed by the filter. The processed data is returned in JSON format. For a data example, see the Data Response area on the Data tab in the widget's configuration panel on the right side of the canvas editor.
     When the treemap chart API request fails	This event is triggered when a data API request fails because of network issues or an API error. The filter processes the resulting error data and returns it in JSON format. For a data example, see the Data Response area on the Data tab in the widget configuration panel on the right side of the canvas editor.
     When a data item is clicked	An event that is triggered when a rectangle in the treemap chart is clicked. The data item that corresponds to that rectangle is also returned.
     When a legend item is clicked	An event that is triggered when a legend item in the treemap chart is clicked. The data item that corresponds to that legend item is also returned.

   • Actions

     Action	Description
     Request treemap chart API	Requests data from the server again. Data from input data processing nodes or layer nodes is passed as parameters. For example, if the API data source for the treemap chart is https://api.test, and the data passed to the Request treemap chart API action is { id: '1'}, the final API request is https://api.test?id=1.
     Import data for treemap chart	Processes data according to the component's rendering format, 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.
     Update component configuration	Dynamically updates the style configuration of the component. In the component's Configuration panel, click Copy configuration to clipboard to get the component configuration data. Then, as needed, change the field values for the corresponding styles in the data processing node of the blueprint editor.
     Show	Shows the component. The following is an example. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Hide	Hides the component. The following is an example. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Toggle visibility	Toggles the component's visibility. The following is an example. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     Move	Moves the component to a specified position. The following is an example. return { // Move method. Absolute positioning: to. Relative positioning: by. Default: to. "positionType": "to", // The specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // Animation method. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Animation curve. Optional values: linear, easeInOutQuad, or easeInOutExpo. "animationEasing": "linear" } };