Percentage stacked area map

1. Overview

1.1 Application Scenarios

On the basis of the stacked area map, calculate the percentage of each indicator of the total, then the stacked area map is formed. As shown in the figure below:

1.2 Requirements of the data

1.3 The table features

Advantages: it can emphasize the changing degree of different types of quantities over time, attract people's attention to the total value, and understand the relationship between part and whole from the graph.

Disadvantages: it is not conducive to too many kinds of display, the picture will be crowded, and the color is not easy to distinguish.

2. Example

2.1 Add Excel dataset

Sample data:

312.BI Percentage stack area map.xlsx

Click "Data Preparation", click "Add a business package", name the business package as "area chart", click "Add Table", select "Excel Dataset", and import the excel file:

"BI percentage stacking area map.xlsx", as shown in the following figure:

The data preview effect is as follows:

2.2 Create components

1) Click the "Dashboard" → "New Dashboard", as shown in the following figure:

2) Click "Add component", as shown in the following figure:

3) Select the business package "area chart", select "BI percentage stacking area map" and click "OK", as shown in the following figure:

2.3 Set the components

1) Convert the "year" field under the "indicator" into a "Dimension", as shown in the following figure:

2) Click "+", do percentage calculation to the indicator fields "Asia", "Africa", "Europe", "Latin America", "North America", get new fields  "percentage of Asia", "percentage of Africa", "percentage of Europe", "percentage of Latin America", "percentage of North America", as shown in the following figure:

3) Select "Custom Chart", drag "percentage of Asia", "percentage of Africa", "percentage of Europe", "percentage of Latin America", "percentage of North America" to the vertical axis, drag the "Year" field to horizontal axis, as shown in the following figure:

4) Set the "year" field as "Merge same items as a group". Set the "percentage of Asia", "percentage of Africa", "percentage of Europe", "percentage of Latin America", "percentage of North America" fields as "Turn on stacking" respectively. As shown in the figure below:

5) Set the "numeric format" of the "percentage of Asia", "percentage of Africa", "percentage of Europe", "percentage of Latin America", "percentage of North America" as "percentage". As shown in the figure below:

6) Set the title of the component, enter "Percentage stacked area map", select the font size as "13", "Bold", and set the color of the font as "Black". As shown in the figure below:

7) Set "Legend" to "display", and the legend's font color is "blue", font size is "12", and the legend location is "up". As shown in the figure below:

8) Set the graphic's color. As shown in the figure below:

2.4 Set category axis

1) Set the "year" field's "Category Axis", the "text direction" is "- 15", the font size is "12", the font is "Blue", and uncheck the "Display axis title". As shown in the figure below:

2) Set the axis label to "Blue" and the font size to "12", set the minimum value of "Axis Scale" to "0" and the maximum value to "1", rename the title to "Ten Thousand", and set the font size to "12". As shown in the figure below:

3. View the effect

3.1 PC terminal

Click "Save As" and "Preview Dashboard", the effect has shown in section 1.1.

3.2 Mobile terminal

The effect of App and HTML5 terminal are the same, as shown in the figure below: