Skip to Content

文档更改5.8.2.3 Pie chart

由 liuqing01 于 2025/06/30 11:36 最后修改
从版本 14.9
由maym编辑
在2025/03/10 08:26上
修改评论： 该版本没有评论
到版本
由liuqing01编辑
在2025/06/18 10:05上
修改评论： 该版本没有评论

摘要

细节

页面属性
文档作者
... ... @@ -1,1 +1,1 @@
1 -XWiki.maym
1 +XWiki.liuqing01
内容
... ... @@ -1,3 +1,5 @@
1 +
2 +
1 1  ==== **[Usage Scenario]** ====
2 2  
3 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:
... ... @@ -19,17 +19,17 @@
19 19  
20 20   The basic requirements for a pie chart are as follows:
21 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
24 +|Category Field|Mumeric Field
25 +|Only one field can be configured|Only one field can be configured
25 25  
26 - **Step-1 Select components and configure data sources**
27 +==== **[Configuration steps]** ====
27 27  
29 + **Step-1 Select chart and configure data sources**
30 +
28 28   Create a report, select the pie chart in the upper left corner, and then choose the data source, as shown in the figure:
29 29  
30 -[[image:1729843622506-386.png||height="546" width="767"]]
33 +[[image:1750236977695-351.png]]
31 31  
32 -
33 33   **Step-2 Select chart display fields**
34 34  
35 35   Drag and drop the fields from the data source on the right onto the classification and numerical fields.
... ... @@ -37,9 +37,8 @@
37 37  * (((
38 38  Data source for pie chart:
39 39  
40 - 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:将销售物品类型拖入分类字段中，将销售数量拖入数值字段中，则可以得出：【按照销售物品类型分类后的销售数量的统计饼状图】
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: Drag the order time into the category field and the order amount into the numerical field, and you will get the following pie chart of order amounts classified by order date:
41 41  
42 -
43 43  * (((
44 44  **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.
45 45  )))
... ... @@ -46,11 +46,9 @@
46 46  * (((
47 47  **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.
48 48  
49 -(((
50 50  ====== 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). ======
51 -)))
52 52  
53 -[[image:1729749814387-113.png||height="669" width="1300"]]
52 +[[image:1750237017901-981.png]]
54 54  )))
55 55  )))
56 56  
... ... @@ -58,97 +58,81 @@
58 58  
59 59   Divided into three categories: Basic Settings, Labels, and Legends, as shown in the following figure:
60 60  
61 -[[image:1729750188515-947.png||height="766" width="1425"]]
60 +[[image:1741595493430-615.png]]
62 62  
63 -
64 -(((
65 -
66 -)))
67 -
68 -(((
69 -
70 -
71 -
72 -)))
73 -
74 74  ==== **[Style Configuration Description]** ====
75 75  
76 -|(% colspan="1" rowspan="1" style="width:107px" %)Classification|(% colspan="1" rowspan="1" style="width:150px" %)Configuration Items|(% colspan="1" rowspan="1" style="width:1304px" %)(((
64 +|(% colspan="1" rowspan="1" %)Classification|(% colspan="1" rowspan="1" %)Configuration Items|(% colspan="1" rowspan="1" %)(((
77 77  Purpose
78 78  )))
79 -|(% colspan="1" rowspan="6" style="width:107px" %)(((
67 +|(% colspan="1" rowspan="6" %)(((
80 80  Basic Style
81 81  
82 82  
83 -)))|(% colspan="1" rowspan="1" style="width:150px" %)Show heading|(% colspan="1" rowspan="1" style="width:1304px" %)(((
84 -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
71 +)))|(% colspan="1" rowspan="1" %)Show title|(% colspan="1" rowspan="1" %)(((
72 +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 "Sales atatistis" are shown in the following figure
85 85  
86 -[[image:1729754356435-491.png]]
74 +[[image:1741595558139-598.png]]
87 87  )))
88 -|(% colspan="1" rowspan="1" style="width:150px" %)Chart title|(% colspan="1" rowspan="1" style="width:1304px" %)You can name the chart by yourself
89 -|(% colspan="1" rowspan="1" style="width:150px" %)Help text|(% colspan="1" rowspan="1" style="width:1304px" %)Control whether the help copy is displayed in the chart. If enabled, client users can see a "?" icon after the chart title and the corresponding help copy when moving the mouse over the icon
90 -[[image:1729754478509-444.png]]
91 -|(% colspan="1" rowspan="1" style="width:150px" %)Help text content|(% colspan="1" rowspan="1" style="width:1304px" %)Enter a description of the chart here to help client users understand the chart data
92 -|(% colspan="1" rowspan="1" style="width:150px" %)Pie chart type|(% colspan="1" rowspan="1" style="width:1304px" %)(((
76 +|(% colspan="1" rowspan="1" %)Title name|(% colspan="1" rowspan="1" %)You can name the chart by yourself
77 +|(% colspan="1" rowspan="1" %)Help text|(% colspan="1" rowspan="1" %)Control whether the help copy is displayed in the chart. If enabled, client users can see a "?" icon after the chart title and the corresponding help copy when moving the mouse over the icon
78 +[[image:1741595638111-718.png]]
79 +|(% colspan="1" rowspan="1" %)Help text content|(% colspan="1" rowspan="1" %)Enter a description of the chart here to help client users understand the chart data
80 +|(% colspan="1" rowspan="1" %)Pie chart type|(% colspan="1" rowspan="1" %)(((
93 93  By default, "General" is selected. The second option is a circular chart, which has the following effect:
94 94  
95 -[[image:1729754564047-207.png||height="451" width="1137"]]
83 +[[image:1741595667776-260.png]]
96 96  
97 97  
98 98  )))
99 -|(% colspan="1" rowspan="1" style="width:150px" %)Color scheme|(% colspan="1" rowspan="1" style="width:1304px" %)Customize the color scheme of the Y-axis pillar
100 -|(% colspan="1" rowspan="5" style="width:107px" %)(((
87 +|(% colspan="1" rowspan="1" %)Color scheme|(% colspan="1" rowspan="1" %)Customize the color scheme of the Y-axis pillar
88 +|(% colspan="1" rowspan="5" %)(((
101 101  Label
102 102  
103 103  
104 -)))|(% colspan="1" rowspan="1" style="width:150px" %)(((
92 +)))|(% colspan="1" rowspan="1" %)(((
105 105  Display Label
106 -)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
107 -(((
94 +)))|(% colspan="1" rowspan="1" %)(((
108 108  Control whether to display the labels of the pie chart, as shown in the following figure:
109 109  
110 -[[image:1729754768467-631.png||height="523" width="1081"]]
111 -)))
97 +[[image:1741595724904-816.png]]
112 112  
113 -(((
114 114  
115 115  )))
116 -)))
117 -|(% colspan="1" rowspan="1" style="width:150px" %)Color font size|(% colspan="1" rowspan="1" style="width:1304px" %)Support user-defined color and font size for label
118 -|(% colspan="1" rowspan="1" style="width:150px" %)(((
101 +|(% colspan="1" rowspan="1" %)Color font size|(% colspan="1" rowspan="1" %)Support user-defined color and font size for label
102 +|(% colspan="1" rowspan="1" %)(((
119 119  Label position
120 120  
121 121  
122 -)))|(% colspan="1" rowspan="1" style="width:1304px" %)Provide 3 modes: internal, external, spider diagram
123 -|(% colspan="1" rowspan="1" style="width:150px" %)(((
106 +)))|(% colspan="1" rowspan="1" %)Provide 3 modes: internal, external, spider diagram
107 +|(% colspan="1" rowspan="1" %)(((
124 124  Label content
125 125  
126 126  
127 -)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
111 +)))|(% colspan="1" rowspan="1" %)(((
128 128  It is a combination of titles, percentages, and values arranged in various ways. The default combination is [title, percentage], but users can also change it to other content, such as the "title, value (percentage)" combination, as shown in the following figure:
129 129  
130 -[[image:1729756074259-175.png]]
114 +[[image:1741595756674-393.png]]
131 131  
132 132  
133 133  )))
134 -|(% colspan="1" rowspan="1" style="width:150px" %)% decimals|(% colspan="1" rowspan="1" style="width:1304px" %)(((
118 +|(% colspan="1" rowspan="1" %)% decimals|(% colspan="1" rowspan="1" %)(((
135 135  Set the decimal places for percentages in the above labels, for example, to display 3 decimal places, as shown in the following figure:
136 136  
137 -[[image:1729756197988-684.png]]
121 +[[image:1741595788641-743.png]]
138 138  
139 -
140 140  
141 141  )))
142 -|(% colspan="1" rowspan="3" style="width:107px" %)(((
125 +|(% colspan="1" rowspan="3" %)(((
143 143  Legend
144 -)))|(% colspan="1" rowspan="1" style="width:150px" %)(((
127 +)))|(% colspan="1" rowspan="1" %)(((
145 145  Show legend
146 -)))|(% colspan="1" rowspan="1" style="width:1304px" %)(((
129 +)))|(% colspan="1" rowspan="1" %)(((
147 147  By default, it is turned on, and when turned off, the legend will not be displayed
148 148  
149 -[[image:1729756246566-930.png]]
132 +[[image:1741595825268-360.png]]
150 150  )))
151 -|(% colspan="1" rowspan="1" style="width:150px" %)Legend position|(% colspan="1" rowspan="1" style="width:1304px" %)(((
134 +|(% colspan="1" rowspan="1" %)Legend position|(% colspan="1" rowspan="1" %)(((
152 152  The legend defaults to the top left corner of the chart and supports displaying the legend in other positions of the chart, such as the top center, bottom left corner, top right corner, bottom center, or bottom right corner
153 153  )))
154 -|(% colspan="1" rowspan="1" style="width:150px" %)Color and font size|(% colspan="1" rowspan="1" style="width:1304px" %)Adjust the text color and font size of the legend
137 +|(% colspan="1" rowspan="1" %)Color and font size|(% colspan="1" rowspan="1" %)Adjust the text color and font size of the legend
1741595309305-287.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.maym
大小
... ... @@ -1,0 +1,1 @@
1 +70.8 KB
内容
1741595325557-627.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.maym
大小
... ... @@ -1,0 +1,1 @@
1 +70.8 KB
内容
1741595446152-461.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.maym
大小
... ... @@ -1,0 +1,1 @@
1 +115.3 KB
内容
1741595493430-615.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.maym
大小
... ... @@ -1,0 +1,1 @@
1 +102.0 KB
内容
1741595558139-598.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.maym
大小
... ... @@ -1,0 +1,1 @@
1 +61.0 KB
内容
1741595638111-718.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.maym
大小
... ... @@ -1,0 +1,1 @@
1 +62.4 KB
内容
1741595667776-260.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.maym
大小
... ... @@ -1,0 +1,1 @@
1 +119.8 KB
内容
1741595724904-816.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.maym
大小
... ... @@ -1,0 +1,1 @@
1 +117.9 KB
内容
1741595756674-393.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.maym
大小
... ... @@ -1,0 +1,1 @@
1 +123.1 KB
内容
1741595788641-743.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.maym
大小
... ... @@ -1,0 +1,1 @@
1 +117.3 KB
内容
1741595825268-360.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.maym
大小
... ... @@ -1,0 +1,1 @@
1 +73.9 KB
内容