Skip to Content

Wiki源代码5.8.2.3 Pie chart

由用户 maym 在 2025/03/10 08:09 保存的版本 14.4
显示最后作者
1 ==== **[Usage Scenario]** ====
2
3 A pie chart is a commonly used type of data visualization chart that presents data as a circular shape resembling a pie chart, displaying the proportions of different data classifications in a fan-shaped manner. It is suitable for the following scenarios:
4
5 * (((
6 **Proportional display:** A pie chart is suitable for displaying the proportion or proportion relationship of different categories in the population. For example, market share, the proportion of various expenses to total expenses, etc.
7 )))
8 * (((
9 **Category Display:** A pie chart can classify and display data according to different categories, visually showing comparisons between different categories. For example, the sales proportion of different products, the sales proportion of different regions, etc.
10 )))
11 * (((
12 **Trend analysis:** By observing the size changes of each sector in the pie chart, the trend and changes of the data can be analyzed. For example, seasonal changes in sales revenue, changes in the proportion of users in different age groups, etc.
13 )))
14 * (((
15 **Highlights**: Specific data or categories can be emphasized by highlighting a sector or several important sectors in the pie chart. For example, highlighting the market share of a certain product, highlighting the sales proportion of a certain region, etc.
16 )))
17
18 ==== **[Basic Requirements ]** ====
19
20 The basic requirements for a pie chart are as follows:
21
22 (% style="width:584px" %)
23 |(% style="width:280px" %)Category Field|(% style="width:300px" %)Mumeric Field
24 |(% style="width:280px" %)Only one field can be configured|(% style="width:300px" %)Only one field can be configured
25
26 ==== Only one field can be configured ====
27
28 **Step-1 Select components and configure data sources**
29
30 Create a report, select the pie chart in the upper left corner, and then choose the data source, as shown in the figure:
31
32 [[image:1729843622506-386.png||height="546" width="767"]]
33
34
35 **Step-2 Select chart display fields**
36
37 Drag and drop the fields from the data source on the right onto the classification and numerical fields
38
39 * (((
40 Data source for pie chart:
41
42 With the classification field and numerical field, it is possible to draw the correct pie chart based on the actual situation of the data. In the following figure:将销售物品类型拖入分类字段中，将销售数量拖入数值字段中，则可以得出：【按照销售物品类型分类后的销售数量的统计饼状图】
43
44
45 * (((
46 **Classification field:** This field represents the category or classification of the data, and each data point should have a corresponding category. The category field can be product name, region name, department name, etc., used to indicate the specific category to which the data belongs.
47 )))
48 * (((
49 **Numerical field:** This field represents the specific numerical value/quantity for each category. Numerical fields can be sales revenue, sales quantity, market share, etc., used to represent the proportion or percentage of each category in the overall population.
50
51 (((
52 ====== If a non numeric field (such as string, date, location type) is dragged into a numeric field (dashed box), the string, date, location will be converted to the number of times the field appears based on the default aggregation method (count) ======
53 )))
54
55 [[image:1729749814387-113.png||height="669" width="1300"]]
56 )))
57 )))
58
59 **Step-3 Style settings**
60
61 Divided into three categories: Basic Settings, Labels, and Legends, as shown in the following figure:
62
63 [[image:1729750188515-947.png||height="766" width="1425"]]
64
65
66 (((
67
68 )))
69
70 (((
71
72
73
74 )))
75
76 ==== **[Style Configuration Description]** ====
77
78 |(% colspan="1" rowspan="1" style="width:107px" %)Classification|(% colspan="1" rowspan="1" style="width:150px" %)Configuration Items|(% colspan="1" rowspan="1" style="width:1304px" %)(((
79 Purpose
80 )))
81 |(% colspan="1" rowspan="6" style="width:107px" %)(((
82 Basic Style
83
84
85 )))|(% colspan="1" rowspan="1" style="width:150px" %)Show heading|(% colspan="1" rowspan="1" style="width:1304px" %)(((
86 Control whether the chart title in the upper left corner of the canvas is displayed. When closed, the chart title will not be displayed in the report, The words "柱状图1" are shown in the following figure；
87
88 [[image:1729754356435-491.png]]
89 )))
90 |(% colspan="1" rowspan="1" style="width:150px" %)(((
91 标题名称
92 )))|(% colspan="1" rowspan="1" style="width:1304px" %)支持用户自定义报表标题
93 |(% colspan="1" rowspan="1" style="width:150px" %)(((
94 帮助文字
95 )))|(% colspan="1" rowspan="1" style="width:1304px" %)开启后，标题右侧出现小问号，鼠标悬浮时，出现帮助文字具体内容
96 [[image:1729754478509-444.png]]
97 |(% colspan="1" rowspan="1" style="width:150px" %)(((
98 帮助文字内容
99 )))|(% colspan="1" rowspan="1" style="width:1304px" %)支持用户自定义帮助文字的文案，例如“本月销售总额统计”
100 |(% colspan="1" rowspan="1" style="width:150px" %)(((
101 饼状图类型
102 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
103 默认选中“常规”，第二选项：环形图，环形图效果如下：
104
105 [[image:1729754564047-207.png||height="451" width="1137"]]
106
107
108 )))
109 |(% colspan="1" rowspan="1" style="width:150px" %)(((
110 配色方案
111 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
112 支持用户自定义图形整体的配色方案
113 )))
114 |(% colspan="1" rowspan="5" style="width:107px" %)(((
115 标签
116
117
118 )))|(% colspan="1" rowspan="1" style="width:150px" %)(((
119 显示标签
120 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
121 (((
122 控制是否显示标签的开关，如下图：
123
124 [[image:1729754768467-631.png||height="523" width="1081"]]
125 )))
126
127 (((
128
129 )))
130 )))
131 |(% colspan="1" rowspan="1" style="width:150px" %)(((
132 颜色字号
133 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
134 略
135 )))
136 |(% colspan="1" rowspan="1" style="width:150px" %)(((
137 标签位置
138
139
140 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
141 支持3种模式：内部，外部，蜘蛛图
142 )))
143 |(% colspan="1" rowspan="1" style="width:150px" %)(((
144 标签内容
145
146
147 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
148 是标题、百分比、值的各种排列组合，默认选择【标题，百分比】如下，用户也可以改成其他内容，例如“标题，值（百分比）”，如下图：
149
150 [[image:1729756074259-175.png]]
151
152
153 )))
154 |(% colspan="1" rowspan="1" style="width:150px" %)(((
155 百分比小数位数
156 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
157 设置上述标签内容中，百分比的小数位数，例如设置成显示3位小数，如下图：
158
159 [[image:1729756197988-684.png]]
160
161
162
163 )))
164 |(% colspan="1" rowspan="3" style="width:107px" %)(((
165 图例
166 )))|(% colspan="1" rowspan="1" style="width:150px" %)(((
167 显示图例
168 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
169 默认开启， 如下图：
170
171 [[image:1729756246566-930.png]]
172 )))
173 |(% colspan="1" rowspan="1" style="width:150px" %)(((
174 图例位置
175 )))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
176 图例默认出现在画布的左上角，同时支持用户设置图例在画布中的位置
177
178
179
180 )))
181 |(% colspan="1" rowspan="1" style="width:150px" %)(((
182 颜色字号
183 )))|(% colspan="1" rowspan="1" style="width:1304px" %)支持用户根据需要自行调整图例的文字颜色和字体大小