css implements two-color pie chart

from: wx--front-end early reading class

 

First recall the method of drawing triangles with css:

<div class="triangle"></div>

.triangle {
  display: inline-block;
  border: 40px solid;
  border-color: red transparent transparent transparent;
}

Get a triangle with a hypotenuse length of 40px, as shown in the figure:

 

 Then, we use css to draw a quarter circle

<div class="pie"></div>

.pie {
  width: 0;
  height: 0;
  border-radius: 50%;
  border: 75px solid;
  border-color: #3c9 red #39c yellow;
}

The graphics are as follows:

 

 After rotating 45 °,

.pie {
  width: 0;
  height: 0;
  border-radius: 50%;
  border: 75px solid;
  border-color: #3c9 red #39c yellow;
  transform: rotate(45deg);
}

 

 On the basis of the above ideas, drawing a pie chart at a given ratio, the idea is as follows:

• Overlay two pie chart layers;

• In the initial state, we set the color of the right half of the pie chart (ie, the top and right borders) to blue; the color of the left half (ie, the bottom and left borders) is set to transparent. In this initial situation, the green part of the right half of the .pie element is covered with blue by this overlay. Visually, the progress of the .pie element is 0 at this time;

• Rotate this overlay at different angles according to requirements, so that different percentages of pie charts are achieved.

First, the superimposed pie chart can be implemented with pseudo-elements:

.pie {
  position: relative;
  width: 0;
  height: 0;
  border-radius: 50%;
  border: 75px solid;
  border-color: #3c9 #3c9 #39c #39c;
  transform: rotate(45deg);
  &::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border:75px solid;
    border-color: @base-color @base-color  transparent transparent;
  }
}

 

 Pan on the basis of the image above so that the two layers coincide.

.pie {
  position: relative;
  width: 0;
  height: 0;
  border-radius: 50%;
  border: 75px solid;
  border-color: #3c9 #3c9 #39c #39c;
  transform: rotate(45deg);
  &::after {
    content: "";
    position: absolute;
    transform: translate(-50%, -50%);// Because the width and height of the .pie element are both 0, the upper left corner of the content-box is exactly the center point of the .pie 
    border-radius : 50% ; 
    border : 75px solid ; 
    border-color : @ base-color @base -color transparent transparent ; 
  } 
}

 

 

At this time, by rotating the pseudo element by an angle, for example, by 10%, the pie chart effect can be achieved. Just add a rotate to the tranform attribute of the pseudo-element and make its value equal to 0.1turn.

.pie {
  position: relative;
  width: 0;
  height: 0;
  border-radius: 50%;
  border: 75px solid;
  border-color: #3c9 #3c9 #39c #39c;
  transform: rotate(45deg);
  &::after {
    content: "";
    position: absolute;
    transform: translate(-50%, -50%) rotate(0.1turn);// Add a rotate to the tranform property and make its value equal to 0.1turn 
    border-radius : 50% ; 
    border : 75px solid ; 
    border-color : @ base-color @ base-color transparent transparent ; 
  } 
}

 

 It is now possible to achieve a pie chart scale of 0-50%. For ratios greater than 50%, if the pseudo-element is directly rotated to 0.6trun (that is, rotated by 60%), then the pie chart becomes like this:

 

To solve this problem, we need to adjust the color configuration of the left and right semicircles of the pseudo-element. Setting the upper and right borders that were originally blue to transparent colors and the lower and left borders that were originally transparent to green can solve the problem beyond the above.

 

 The pie chart element that gives more than 50% progress is defined as .pie2. In this selector, we set the colors of the upper and right borders of the pseudo-elements to transparent, and the colors of the lower and left borders to green.

@base: {
  border-color:  @base-color @base-color transparent transparent;
}
@base2: {
  border-color: transparent transparent @part-color @part-color;
}
// 声明mixin
.pie(@rotate) {
  position: relative;
  width: 0;
  height: 0;
  border-radius: 50%;
  border: 75px solid;
  border-color: @part-color @part-color @base-color @base-color; 
  transform : rotate (45deg) ; 
  & :: after { 
    content: "" ; 
    position : absolute ; 
    transform : translate (-50%, -50%) rotate (@rotate) ; // relative position (0,0) then In the upper left corner of the element content area (content-box). Because the width and height of the .pie element are both 0, the upper left corner of the content-box is exactly the center point of the .pie 
    border-radius : 50% ; 
    border : 75px solid ; 
  } 
} 
.pie { 
  .pie (0.3turn); 
  & :: after { 
    @base () ; 
  } 
}

.pie2 {
  .pie(0.6turn);
  &::after {
    @base2();
  }
}

Show scale on pie chart:

    <div class="pie1"><span class="on-pie">0.3</span></div>
    <div class="pie2"><span class="on-pie">0.6</span></div>

.on-pie {
  position: absolute;
  transform: rotate(-45deg);
  z-index:1;
}

As of now, the two-color pie chart has been implemented, but the following problems still exist:

• Normally, our statistics come from the server and are dynamic rather than static, so the progress rate of the pie chart needs to be dynamically bound rather than hard-coded in CSS. (Pseudo-elements are not easy to operate with JS and cannot be controlled by inline-css)
• We can only display two-color pie charts. What if we want to display more colors, or even pie charts of any number of colors?