Rectangular tree chart

1. Overview

1.1 Application scenario

Rectangular tree chart is used to describe the relationship between the percentage of data in the hierarchy and to drill down to show the lower levels of data.

For example, to show "contract amount": the same color indicates a year, and each square of the same color represents a category of products. The size of the "contract amount" for each year and product can be displayed visually by the size of the rectangle. The effect is shown in the following figure.

1.2 Basic requirements

Basic requirements of Rectangular tree chart.

1.3 Chart features

Advantages: Shows data with hierarchical relationships, and can visually represent comparisons between peers.

Disadvantages: Not suitable for data with unclear hierarchical relationships or more categories.

2. Example

2.1 Create a component

1）Click the "Dashboard" tab, select "New Dashboard", and click "OK", as shown in the following figure.

2）Click "Add Component", select "test_for_rectangular_tree_chart", and click "OK", as shown in the following figure.

3）Drag "contract sign time" and "product name" from the dimension of the region to be analyzed into the dimension, and drag the field "contract amount" from the indicator into the indicator.

4）Under Chart type, select "Rectangulat tree chart". After selecting this chart type, the dimension fields are added to the fine-grained in order and the indicator fields are added to the size attribute. As shown in the figure below.

5）Move "contract sign time" in the fine-grained column to the color column, and click the drop-down arrow to switch to the year display, as shown below.

Note: The arrangement logic of Rectangulat tree chart here is: from top left to bottom right, in order to represent the values from large to small. When there is no size comparison, the sorting order is always selected as the rectangular block with aspect ratio close to 1. The sorting method does not support changing by default.

2.2 Graphic Properties settings

Click on the "Color" property setting, select the color scheme as custom, and set the category color of "contract sign time" (year), as shown in the following figure.

You can also set Graphic Properties - size, label, hint, fine-grained, etc. For details, see: Graphic Properties

Component legends, gridlines, backgrounds, adaptive display, etc. See: Chart Component Styles for details

2.3 Effect view

2.3.1 PC side

Select the corresponding dashboard, click Preview, and the preview effect is shown in the following figure.

2.3.2 Mobile side

App with HTML5 end effect, as shown below.

3. Dashboard view

The completion dashboard can be found at: General Rectangulat tree chart