More and more designers support business requirements through components, components are design precipitation but also need designers to think deeply about every detail. In this paper, the general method of specification chart adaptation is explored based on the adaptation problem of ring graphs.

1. Understand the ring diagram

Before we understand the ring diagram, we must first understand the pie chart. The pie chart borrows the metaphor of biscuits and presents the proportion of each component in the whole with circular cut corners. The circular graph is a kind of distortion of the round pie chart. In the visual way, the ring map is more “lighter” than the round pie chart because of removing the center part, but it can still explain the proportion of the data. So in the whole page of Dashboard design, the use of ring diagram can avoid the problem of partial visual overload. The following picture (picture from the Internet) case, the whole page is visually most “heavy” is pie chart.

People’s reading order is read from top to bottom and clockwise. Therefore, when drawing the ring diagram, it is necessary to order the data items according to the size of the values according to the order of reading, and put the most obvious part in the most readable position. Some people compare the reading pie chart to the reading dial, and people will regard 12 points as the starting point of reading, so the largest area is placed on the right side of the 12 point position. Because the human eye is limited to the color recognition of the unified area, the segmentation of the pie chart should be controlled in 5-6 copies. If the data are very large, the remaining data should be classified as the same category and the other should be labeled.

2. the adaptation of the ring diagram

The adaptation of the size of 1. rings

The layout of the chart first needs to determine the chart area. Here I first specify that the title and card are the chart containers, and the space in the container is a chart area.

The general ring map contains two parts of the circle and the graph. The adaptation of the circular ring is actually the size of the drawing area under the different length and width. It can also be understood as a relationship between the length and width of the drawing area and the diameter of the circle.

In the following section, we call the width of the drawing area W, and the high name is H. These two values determine the diameter of the ring graph as a known parameter.

We then test the presentation of ring graphs under different lengths and lengths by enumeration. It is not difficult to find that the diameter of the ring diagram can be determined by the shortest side of W or H. When the shortest edge is unchanged and the long edge changes, the size of the ring diagram does not need to change.

In this way, the problem we have solved is more explicit.

Then we use a single variable enumeration, W > = H as an example (i.e., length and width ratio < =1), and H determines the radius of the chart. In a certain case of W, the test is carried out, such as the following drawing with the platform, whether or not it meets the display requirement by dragging and dragging the different width after the configuration of different radii.


In enumeration, visual judgment is based on the following two points:

Is the proportional relationship between the pie area or the circle area and the map injection area coordinated? When the layout of the map and the ring diagram is left and right, the suitable width ratio is about 5:5.
Is the proportions between the pie area and the whole container coordinated? The ring should not be too large or too small. Too large a circle will be too heavy in visual sense, which will affect the reading of other contents in the page.
In the process of testing, the result of the test is recorded in form.

After testing, it was found that the whole zoom process could be divided into three breakpoint intervals: 0< H < =200200=300; meanwhile, we also found that the maximum and minimum of a recommended presentation needed to be assigned to the pie chart during the presentation process, and the display area was too small to see the pie chart and data content; the display area was too large to waste the screen. Curtain space. Therefore, the adaptable breakpoints are clearer.

(1) when 130< H = < 200, the diameter R = H * 80%;

(2) when 200 < H < 300, the diameter is R = H * 60%;

2. the proportions of display

Balance of the left and right layout

When we regard the ring diagram as a dot, the part of the annotation can be regarded as a rectangle.

Horizontal layout and longitudinal layout

In the display of general ring diagram, the form of left and right layout is more friendly in reading and correspondence of charts. However, when the map rendering area H > W (i.e. aspect ratio < =1), the layout of the left and right layout is superior to the upper and lower layouts in the way of space utilization.


Through ring diagram adaptation, we can deduce the general method of graph adaptation from the cover surface.

1. understand the presentation intention, usage scenario, general usage and so on.

It is clear that the presentation intention is able to accurately judge which way the graph is presented, which is unreasonable. Conventional display must be combined with specific scenes to produce the most appropriate presentation.

2. use the maximum minimum to delineate the limits of the display

The specification of limit values enables charts to fit in a certain range and presents a better presentation. In addition to delineating the limit range, it is also necessary to describe how to deal with it if it exceeds the limit. As in the data product Power BI of the following Microsoft, when the graph is more than a certain limit, the default is hidden, and the user can still see the details of the data from the hover to the chart.

3. preliminarily dividing the adaptation gradient by enumerating

When a solution cannot be covered to fit all dimensions, we will solve the adaptation problem by dividing the gradient. The division of gradients can refer to the display of all sizes of equipment and the presentation of charts under different sizes.

4. a reasonable mode of display for each gradient

For every gradient specification, it can be more reasonable to match business scenarios.

When we standardize the adaptation schemes of each chart, we also need to propose a scheme for the adaptive layout of the entire Dashboard page. At this point, we first enumerate the commonly used device dimensions, specify the fit of the breakpoint gradient, and then standardize each type of card to place a maximum of several cards at the next line at different breakpoints. The following is the card adaptation scheme for N=4, 6, 8 and 12 in Dashboard grid layout.



1 thought on “Take the ring diagram as an example, Ali designer teaches you how to standardize the adaptation of charts.”

Comments are closed.