How to use AntV/G2/G2Plot to optimize the charting experience

How to use AntV/G2/G2Plot to optimize the charting experience

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 configurationAfter 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.

layoutScope of applicationDescription
overlapUniversalTo prevent text labels from overlapping, it will try to offset the text labels around to prevent occlusion
fixed-overlapUniversalSame as overlap, but does not move the position of the text note
hide-overlapUniversalSame as fixed-overlap, the background graphics of the text note will be considered when checking the occlusion of the text label
limit-in-canvasUniversalLimiting the text label to the canvas range will simply move the text label beyond the canvas range to the canvas range
limit-in-plotUniversalLimiting 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-colorUniversalAutomatically adjust the text color of the text label
path-adjust-positionLine chart/area chartSimilar to overlap, the overlapping text labels will be adjusted up and down or hidden
point-adjust-positonLine chart/area chartSimilar to overlap, the overlapped text labels will be adjusted up and down or hidden. For point geometry
interval-adjust-positionColumn Chart/Bar ChartAutomatically adjust the position of the text label
interval-hide-overlapColumn Chart/Bar ChartSimilar to fixed-overlap, hide text labels according to priority
distributePie chartOptimization of external text label of pie chart
pie-spiderPie chartPie chart spider label layout
pie-outerPie chartPie 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:

typeDescription
fixedAngleIf axis label occlusion occurs, use a fixed angle (45 ) to rotate the text
unfixedAngleIf 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:

typeDescription
equidistanceIf the axis label text overlap occurs, this will perform uniform sampling to ensure that the label is displayed uniformly and does not overlap
equidistanceWithReverseBothSame as equidistance, first it will ensure that the labels are displayed evenly, and then it will keep the beginning and the end
reserveBothEnsure that the first and last label is visible, and the others will be occluded and hidden
reserveFirstEnsure that the first label is visible, and the others will be occluded and hidden
reserveLastEnsure 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:

typeDescription
ellipsisTailIf the axis label text overlaps, this will omit the display of the end of the text
ellipsisHeadOmit display of the text header
ellipsisMiddleOmit 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 .