Display query results on a treemap chart

Chart style

Treemap charts display hierarchical data and visually compare items at the same level. Compared with traditional tree structure diagrams, treemap charts use space more efficiently and can show proportional relationships.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel to search for a configuration item by name. Fuzzy match is supported. For more information, see Search configuration items.

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

  • Positioning: the x-axis and y-axis coordinates of the widget, in pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

  • Rotate: the rotation angle of 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. A value of 0 hides the widget, and a value of 1 displays it at full opacity. Default value: 1.

• Chart name

  Metric	description
  Custom Margins	Click the icon to toggle custom margins. When enabled, you can set the distance between the treemap chart area and the four boundaries of the widget. Unit: px by default.
  Nested Levels	The maximum number of nested levels for the treemap chart.
  Value tag	Click the icon to show or hide the value label. You can set the font style, weight, size, and color of the value label text.
  UI page	Click the icon to toggle the legend display. Page Flip Allowed: When enabled, the page number style and arrow style of the legend are shown, and the legend content can be paged. When disabled, all legend content is displayed on a single page. Layout: 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, and Bottom Right. Legend Marker: the shape and size of the legend marker, in pixels. Legend Text: the font style, weight, size, and color of the legend text.

• Series: the style settings for treemap chart data series.

  data series: Click the or icon on the right to add or delete a data series. Click the or icon to configure the arrangement style of multiple data series. Click the icon to copy the selected data series configurations and add a data series with the same configurations.

  Color: the color of each series.

• Level: the style settings for each treemap chart level.

  Click the or icon on the right to add or delete a hierarchy. Click the or icon to configure the arrangement style of multiple hierarchical series. Click the icon to copy the current level series configuration and add a level series with the same configuration.

  Rectangle Style: the rectangle style of each layer, including the stroke color, stroke thickness, and transparency.

• Others: the dialog box style of the treemap chart. The dialog box style appears when you move the pointer over or click the heatmap icon on the preview or publish page. Click the icon to toggle the dialog box.

  Metric	description
  Offset value	The offset distance of the tooltip, in pixels.
  Text Style	The font style, weight, size, and color of the tooltip text.
  Background Box Style	The background style of the tooltip. Background Color: the background color of the tooltip. Pin: the padding of the tooltip background, in pixels. Border: the border thickness and color of the tooltip background.

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 rectangle hierarchy chart interface request completes	Triggered after a data interface request is responded and processed by a filter, with the processed JSON data. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel of the canvas editor.
     When a data item is clicked	Triggered when a rectangle in the treemap chart is clicked, along with the corresponding data item.
     When you click the legend	Triggered when a legend item is clicked, along with the corresponding data item.

   • Action

     Action	Description
     Request Rectangular hierarchy chart Interface	Requests server data again, using the data from an upstream data processing node or layer node as parameters. For example, if the API data source is https://api.test and the data passed to the request rectangular hierarchy chart interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Import Rectangular hierarchy chart Interface	Imports pre-processed data in the widget's drawing format for redrawing without requesting server data again. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel of the canvas editor.
     Move	Moves the widget to a specified location. See the following 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 duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch to the implicit state	Toggles the widget between visible and hidden states. No parameters are required.
     Display	Shows the widget. See the following 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	Hides the widget. See the following 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	Dynamically updates the style configurations of the widget. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data. Then modify the style field in the data processing node in Blueprint Editor.