The G2Plot v2 version has been developed since August this year, and it has been almost 4 months now. It has reached:
- 25+ commonly used statistical charts
- 80% of the charts are validated in complex BI and LowCode products
- 97% code single test coverage
- 5+ Active community participation
In the v2 version, we extract the general experience advantages from the business implementation, generalize the configuration, and build most of the experience optimization solutions into G2, so that users of G2 and G2Plot can directly configure the experience optimization of each chart. Users can easily turn on the default built-in experience optimization and optimization program through configuration and options.
This article will focus on some chart experience problems that are often encountered in business, and how to solve these problems in G2/G2Plot.
TL, DR let s talk about the conclusion first. If you don t understand visualization and don t want to study in depth, and meet the most basic charting requirements of the business in the simplest and most efficient manner, please use G2Plot directly and provide the most simplified basic configuration. G2Plot will automatically use it by default. The best solution is to automatically optimize most of the experience problems in the chart; if you want to solve the experience problems you encounter in a more customized and targeted manner, you can refer to our documentation and read the configuration items to customize them in G2Plot and G2 Solve your experience problem.
Chart component explanation
Before introducing the experience problems often encountered in the chart, here we first understand the basic components of the chart again. A typical conventional statistical chart usually consists of various parts as shown in the figure below:
- Geometry: the chart type of the chart. In G2, Geometry determines the generated chart type; at the same time, different types of geometric markers have different graphic attributes, and the Shape attribute determines the shape of the graphics.
- Label: The text label is a content label for the current set of data, and the text label needs to be turned on on the attached geometric label.
- Axis: Each chart usually contains two coordinate axes. In the Cartesian coordinate system, they are the x-axis and the y-axis. In the polar coordinate system, they are composed of two dimensions: angle and radius. The coordinate axis itself is composed of the title of the coordinate, the axis label of the coordinate, the tick of the coordinate, and the grid of the coordinate axis.
- Legend legend: one of the auxiliary elements of the chart, used to calibrate different data categories and data ranges, assist in reading the chart, and help users to filter the data in the chart.
- Tooltip prompt information: When the mouse is hovering over a certain group of data, the current corresponding data information will be displayed in the form of a prompt box.
- Annotation Auxiliary mark: When you need to draw some auxiliary lines and marks on the chart, you can use the auxiliary mark.
- Slider thumbnail axis: When there is a lot of data in the chart, you can use the thumbnail axis component to allow users to focus on the data in a certain area.
- Scrollbar: When there is a lot of data in the chart, you can also use the scroll bar component to browse a part of the data at a time. The scroll bar component is more suitable for column and bar charts.
Common experience problems and solutions
Text label experience problem
Text sticky occlusion is one of the frequently encountered problems in business. In G2Plot v2 and G2, we provide label layout configuration to optimize text labels.
Configuration method
The configuration method in G2Plot is as follows:
{
//
label: {
// label layout layout type cfg
layout: [
//hide-overlap
{ type: 'hide-overlap'},
//limit-in-plot: cfg
{ type: 'limit-in-plot', cfg: { action: 'hide' } }
]
},
}
Open in G2 through the following ways:
chart
.line()
.position('Year*Deaths')
//
.label('Deaths', {
// label layout layout type cfg
layout: [
//hide-overlap
{ type: 'hide-overlap' },
//limit-in-plot: cfg
{ type: 'limit-in-plot', cfg: { action: 'hide' }}
]
});
Effect comparison before and after configuration:
| Before configuration | After configuration |
|---|---|
Layout applicable to various graphics
After knowing the use of layout to optimize text labels, here we first enumerate and explain the current built-in layout of G2/G2Plot.
| layout | Scope of application | Description |
|---|---|---|
| overlap | Universal | To prevent text labels from overlapping, it will try to offset the text labels around to prevent occlusion |
| fixed-overlap | Universal | Same as overlap, but does not move the position of the text note |
| hide-overlap | Universal | Same as fixed-overlap, the background graphics of the text note will be considered when checking the occlusion of the text label |
| limit-in-canvas | Universal | Limiting the text label to the canvas range will simply move the text label beyond the canvas range to the canvas range |
| limit-in-plot | Universal | Limiting the text label in the graphic range can prevent the text label from overlapping and occluding the chart components such as the coordinate axis; three processing methods are provided for the text expression that exceeds the graphic range: Move position translate: the default processing method, the label that will exceed the graphic range Move position, hide hide: hide text labels that exceed the range, display ellipsis ellipsis: display text labels that exceed the graphic range |
| adjust-color | Universal | Automatically adjust the text color of the text label |
| path-adjust-position | Line chart/area chart | Similar to overlap, the overlapping text labels will be adjusted up and down or hidden |
| point-adjust-positon | Line chart/area chart | Similar to overlap, the overlapped text labels will be adjusted up and down or hidden. For point geometry |
| interval-adjust-position | Column Chart/Bar Chart | Automatically adjust the position of the text label |
| interval-hide-overlap | Column Chart/Bar Chart | Similar to fixed-overlap, hide text labels according to priority |
| distribute | Pie chart | Optimization of external text label of pie chart |
| pie-spider | Pie chart | Pie chart spider label layout |
| pie-outer | Pie chart | Pie chart wrap around label layout |
Combination of layout
In addition, the layout of the text label is a combination configuration, and the text labels can be optimized in a customized order. For example, in the following example configuration, we first adjust the label position of the column chart, and then according to the color of the column corresponding to the text label Adjust the color of the label of the text label, then hide the overlapped ones, and finally hide the unity that exceeds the graphics:
chart
.interval()
.position('type*sales')
.color('series')
.label('sales', {
layout: [
{ type: 'interval-adjust-position' },
{ type: 'interval-hide-overlap' },
{ type: 'adjust-color' },
{ type: 'limit-in-plot', cfg: { action: 'hide' } },
]});
default allocation
In G2, we do not provide a default configuration, and the opening and optimization of the text label need to be manually opened. In G2Plot v2, we have configured the default best layout configuration for each graph. If you do not specify a configuration, the default configuration will be used automatically.
Axis experience problem
In the actual business chart, the coordinate axis is also one of the experience problems. In addition to the comprehensive style configuration for the coordinate axis, we also provide three optimization methods for the axis label: autoRotate, autoHide, and autoEllipsis.
Configuration method
In G2Plot, the way to configure the axis labels is as follows:
{
// X
xAxis: {
label: {
// autoHide
autoHide: true,
// autoRatate
autoRotate: false,
}
}
}
In G2, the configuration is as follows
// Date
chart.axis('Date', {
label: {
// autoHide equidistance 6
autoHide: { type: 'equidistance', cfg: { minGap: 6} },
// autoRotate
autoRotate: false,
}
});
autoRotate configuration
The processing methods supported by autoRatate are as follows:
| type | Description |
|---|---|
| fixedAngle | If axis label occlusion occurs, use a fixed angle (45 ) to rotate the text |
| unfixedAngle | If the axis label occlusion occurs, the appropriate angle is automatically calculated and the new rotation is performed |
autoRotate fixedAngle default configuration approach, i.e., when the configuration autoRotate: truewhen the configuration is equivalent to
{ type: 'fixedAngle' }
autoHide configuration
The processing methods supported by autoHide are as follows:
| type | Description |
|---|---|
| equidistance | If the axis label text overlap occurs, this will perform uniform sampling to ensure that the label is displayed uniformly and does not overlap |
| equidistanceWithReverseBoth | Same as equidistance, first it will ensure that the labels are displayed evenly, and then it will keep the beginning and the end |
| reserveBoth | Ensure that the first and last label is visible, and the others will be occluded and hidden |
| reserveFirst | Ensure that the first label is visible, and the others will be occluded and hidden |
| reserveLast | Ensure that the last label is visible, and the others will be occluded and hidden |
autoHide Optional configuration minimum spacing:
{
minGap: number
}
autoHide equidistance processing method using the default configuration, i.e. when the configuration autoHide: truewhen the configuration is equivalent to:
{ type: '``equidistance', cfg: { minGap: 0 } }
autoEllipsis configuration
The processing methods supported by autoEllipsis are as follows:
| type | Description |
|---|---|
| ellipsisTail | If the axis label text overlaps, this will omit the display of the end of the text |
| ellipsisHead | Omit display of the text header |
| ellipsisMiddle | Omit display in the middle of the text |
autoEllipsis ellipsisTail processing method using the default, i.e., when the configuration autoEllipsis: truewhen the configuration is equivalent to:
{ type: '``ellipsisTail' }
Legend experience problem
Legend position
In both G2Plot v2 and G2, the position of the legend can be specified through the position attribute. However, for different graphics, we recommend that you specify the location of the legend in a targeted manner. The principle here is to shorten the instinctive path for users to look at the graphics against the legend to improve the efficiency of information acquisition. **Although the position of the legend technically supports 12 positions, after we summarized the different positions of the legend in different chart types, we restrained it and converged into two categories. In G2Plot, we will default to not having the most configuration for each chart type. The best legend position.
Legend page turning
When the number of legends is relatively large, the legend will occupy most of the position of the chart, and we will automatically turn on the page turning function of the classified legend. You can also use the flipPageswitches to control flip.
summary
Thank you very much for your patience to read, and finally summarize and repeat the conclusions. If you want to be simple and efficient and use our default suggestions directly, please use G2Plot directly and provide the most simplified basic configuration. G2Plot will automatically use the best by default. Solution to automatically optimize most of the experience problems in the chart; how to customize the row-specific solution to your experience problems, you can refer to our documentation to specify the configuration that suits you.
Students who are interested in visualization technology are welcome to join the continuous iteration of G2Plot. You can:
- Getting started with relatively low barriers such as documentation, DEMO, translation, etc.
- G2Plot's built-in chart development and iteration
- Based on the open and open mechanism of G2Plot, expand the surrounding non-universal charts
thank! By the way, there is also the project open source address: github.com/antvis/G2Pl... . More articles about G2Plot can be found here .