Shulou(Shulou.com)06/02 Report--

How to use CSS to make dynamic pie chart, in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Pie charts are common components that allow you to display parts of the whole, which you can use in many different scenarios. You'll find a lot of articles about building such a component, but they usually rely on either SVG or a large number of HTML elements. In this article, I'll show you how to create a pie chart using CSS and only one element.

Next we make a static pie chart, an animated pie chart, we can also have rounded corners. Yet all of this has only one element.

In addition, we can easily adjust different values using the CSS variable, so we don't have to worry about changing the CSS code.

HTML structure of pie chart

As I mentioned above, we have a single, we add a percentage value (progress of the pie chart) as the main content:

60%

We also add the CSS variable as an inline style.

-- p: this variable should contain a percentage value as a number (without the% sign). It should be the same as the content.

-- b: this variable defines the thickness of the border.

-- c: this variable defines the main color.

For this article and demonstration, I use single-character variables to keep the code short. However, when using code in a production environment, it is best to consider more specific variables. Examples:-- percentage,-- border-thickness and-- main-color.

CSS setting of pie chart

Let's start by styling our content. This part is simple, and the code is as follows:

.pie {--w: 150px; width: var (--w); aspect-ratio: 1; display: inline-grid; place-content: center; margin: 5px; font-size: 25px; font-weight: bold; font-family: sans-serif;}

I define the element as inline-grid using place-content: center. We use aspect-ratio: 1 to ensure that the element remains square. We can also use height: var (--w), but it's always good to learn and use the new CSS attribute.

You may wonder why I use variables to define width instead of simply setting width: 150px. I need to know the value of the width for future use, so I define it as a variable.

All the rest of the CSS are very basic text styles. Feel free to update it.

Let's move on to the interesting part-- the main shape of our component. To do this, we will use pseudo elements with the following styles:

.pie: before {content: "; position: absolute; border-radius: 50%; inset: 0; background: conic-gradient (var (--c) calc (var (--p) * 1%), # 0000 0);}

A pseudo element that covers all areas, position: absolute, thanks to inset: 0. Yes, it is also a new CSS property, which is the abbreviation right for top, right, bottom, and.

You can read more information here

Https://developer.mozilla.org/en-US/docs/Web/CSS/inset

Then we turn it into a circle (border-radius: 50%) and apply a conic-gradient (). Notice the use of the CSS variable we define as an inline style (--c for color and-- p percentage).

So far, this will provide us with the following results:

We're getting closer! This conic-gradient () gives us a two-color gradient. From 0% to p% dominant color, the rest is transparent (defined with a hexadecimal value # 0000).

To keep only the border, we will use amask to hide the middle. This time we will use radial-gradient ():

Radial-gradient (farthest-side,red calc (99%-var (--b)), blue calc (100%-var (--b))

The above background applications will provide us with the following information:

Note the use of variables that define the thickness of the border-b (shown in blue above).

Now imagine that the red part is the invisible part and the blue part is the visible part. If we use the same gradient for attributes, this is the mask we will get:

Our pie chart contains an element and several lines of CSS code.

.pie {--waspect-ratio 150px; width: var (--w); aspect-ratio: 1; position: relative; display: inline-grid; place-content: center; margin: 5px; font-size: 25px; font-weight: bold; font-family: sans-serif;}. Pie:before {content: "; position: absolute; border-radius: 50%; inset: 0 Background: conic-gradient (var (--c) calc (var (--p) * 1), # 0000 0);-webkit-mask:radial-gradient (farthest-side,#0000 calc (99-var (--b)), # 000 calc (100-var (--b)); mask:radial-gradient (farthest-side,#0000 calc (99-var (--b)), # 000 calc (100-var (--b);}

And HTML:

60%

How to add fillet edges

To do this, I will add an extra gradient layer to dome the edge and add a pseudo element to circle the other edge. This is an illustration of understanding skills:

(1) the code for the edge of the dome:

.pie: before {background: radial-gradient (farthest-side,var (--c) 98%) top/var (--b) var (--b) no-repeat, conic-gradient (var (--c) calc (var (--p) * 1%), # 0000 0);}

In addition to conic-gradient (), we have added a radial-gradient () that is placed at the top, whose size is equal to the border thickness defined by b. (2) the code that circles the other side:

.pie: after {content: "; position: absolute; border-radius: 50%; inset: calc (50%-var (--b) / 2); background: var (--c); transform: rotate (calc (var (--p) * 3.6deg)) translate (calc (50-var (--w) / 2));}

The inset attribute sets the size of the pseudo element to be equal to-- b. Remember, it is the abbreviation left for top,right and bottom. If we had

Left = right = 50%-bAccord 2

This means that we move from each side to the center minus the equal offset bmax 2-so our final width is equal to 2*b/2 = b. The logic of the height is the same.

Now we need to place our elements correctly, which is why we use the transform attribute. Our element is initially placed in the center, so we need to rotate it first. With the percentage, we use the "three rules" to get the angle:

Angle = percentage*360deg/100

Then we pan, and here we need the width, because we have to perform a half-width translation (wbin2).

All right, all right-- you may be a little lost in all these formulas. Find an illustration below to understand the logic behind the conversion attribute

After that, we color the pseudo-elements with the dominant color-- c, and we're done. We have a pie chart with round edges.

How to animate a pie chart

Static pie chart is good, but animated pie chart is better! To do this, we define the animation percentage value-p from 0. By default, we cannot animate the CSS variable, but thanks to the new @ property feature, it is now possible.

We register variables:

@ property-- p {syntax:'; inherits: true; initial-value: 0;}

Let's create a keyframes:

@ keyframes p {from {--pvl 0}}

Please note that we only need to specify from. By doing so, by default, the browser will to equal to the value we defined (60%).

Finally, we call it animation. You can define the duration / delay as needed.

Animation: p 1s .5s both

Note: this technology is not widely supported. You can test it on Chromium-based browsers (Chrome and Edge), but fail on Firefox and Safari. You can check the Can I Use to track support.

To make a statement. 3. External style, in which the link style is the most frequently used and the most practical style, only need to add

Just do it. The second is to import styles, import styles and link styles are similar, using @ import style to import CSS stylesheets, not recommended. What is the full name of css? the full name of css is Cascading Style Sheets (cascading style sheets), a computer language used to express file styles such as HTML or XML. CSS can not only modify the web page statically, but also format the elements of the web page dynamically with various scripting languages.

This is the answer to the question about how to use CSS to make dynamic pie chart. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.