Official github: XCharts official website
The first version used is the XCharts-3.6.0 plug-in package.
After importing the plug-in, right-click xcharts->piecharts, as shown below:
1.Theme
Check Transparent Background to make the background transparent, as shown below:
Very important attribute: Enable Custom Theme . If checked, you can customize the color you want. For example, in the above figure, the colors used for data items are filled by default, which are blue, green, and yellow in order. It can be said that the color set in Theme affects the whole world, but it can also be overridden. For example, the color can also be set in a single data item. The color set in Theme can be said to have the lowest priority. The renderings are as follows:
In the picture above, the number of colors is customized, but one thing that is easy to overlook is that after modifying the color, the transparency is 0. You need to modify the transparency manually, otherwise you will find that the data items are missing.
2.Legend
The objects it works on are as shown below:
Properties: Icon Type : Controls the shape of graphics, such as Circle, Rect, you can understand it by trying it manually;
Item width, Item Height, and Item Gap are the width, height and spacing settings of each item respectively, and can be set as needed;
Item Opacity transparency and Item Auto Color automatically use the colors customized in Theme in order ;
Selected Mode : enumeration value, single selection (Single), multiple selection (Multiple), has little effect. During runtime, the mouse can be clicked to select, the effect is as follows:
Clicking pie2 and pie3 will turn gray to indicate that they are not selected, and the data for these two items will not be displayed.
Orient : horizontal, vertical, display; as shown below:
Location : Literally, set the position, offset, and adjust as needed;
Background and LableStyle are used to set some styles. Others are not used in this sharing. According to my experience, they are not very useful.
3.Title
As shown above: some attributes have been introduced, and the function of some attributes can be basically known from their names, mainly setting the title, position, interval, and style.
4.Tooltip
After running, put the mouse on the pie chart, and there will be a prompt box showing the single data. When I saw so many attributes in the picture, I felt like my head was going to explode. But when I calmed down and went to practice, I found that , in fact, there are not many attributes that are used. Some attributes are just fine by default. If you really want to change it, you can only check it on the official website. I basically default the Tooltip, such as position, offset, and Show Content. The default of these attributes is enough. .
5.Serie
Serie Name: Series name, used for tooltip display and legend filtering.
State: The default state of the series. SerieState:
- Normal: Normal state.
- Emphasis: Highlighted status.
- Blur: Fade out status.
- Select: selected state.
- Auto: Automatically keep consistent with the parent node. Generally used in SerieData.
Rose Type: Whether to display it as a Nightingale chart, and distinguish the data size by radius. RoseType:
- None: Not displayed as a Nightingale Rose.
- Radius: The central angle of the sector shows the percentage of the data, and the radius shows the size of the data.
- Area: The central angle of all sectors is the same, and the data size is shown only by the radius.
State and Rose Type, you can see the effect by trying it manually.
Key attributes: Radius: It can turn a pie shape into a ring shape,
As shown above, if the first value of Radius is greater than 0, a ring will appear, as shown below:
Center: Adjust the offset position of the entire pie shape.
6. Add LableStyle, LableLine, TitleStyle properties or call components
As shown above, click the three dots in the upper right corner to add the TitleStyle component.
Key attributes: Formattter : Label content string template formatter. Supports newlines with \n. Template variables are: {.}: dot mark. {a}: Series name. {a}: Series name. {b}: Category value or data name. {c}: data value. {d}: Percentage. {e}: data name. {f}: data sum. Example: "{b}:{c}"
For example, I filled in a total of 100 yuan, and the rendering is as follows:
Then click the three dots in the upper right corner of Serie and add LableStyle and LableLine, as follows:
Now, expand the detailed properties:
Basically, it is enough to set the Formatter properties mentioned above. Other properties can be adjusted according to needs. The effect is as follows:
Line Type: Line type, Curves curve, Horizontal Line, Broken Line;
Start Symbol and End Symbol are mainly used to set the style of the beginning and end of the line, as shown below:
This is the basic property setting. Other properties are very simple and clear. You only need to operate them to understand.
The final effect is as follows;
Summary: We can know the function of most properties of XCharts by their names, or we can manually operate them. Finally, check the official configuration manual. In addition, you can download the official demo and use the provided prefab directly, but you still need to understand some properties so that you can achieve the effect you want.