Простая кольцевая диаграмма CSS3

То, что я пытаюсь сделать, это создать простую кольцевую диаграмму. В настоящее время я использую только CSS (3), но не знаю, возможно ли это без javascript.

Что у меня есть на данный момент: http://jsfiddle.net/aBP5Q/

HTML:

<div class="donut-container" style="background: #9C0;">
    <div class="donut-inner">
        <div class="donut-label">HTML</div>
    </div>
</div>

CSS:

.donut-container {
    width: 150px;
    height: 150px;
    float: left;
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
    border-radius: 75px;
    margin-right: 20px;
}

.donut-inner {
    width: 134px;
    height: 134px;
    position: relative;
    top: 8px;
    left: 8px;
    background: #FFF;
    -webkit-border-radius: 65px;
    -moz-border-radius: 65px;
    border-radius: 65px;
}

.donut-label {
    line-height: 130px;
    text-align: center;
    font-size: 20px;
}

Я хотел бы отобразить зеленый и синий цвета в качестве прецента. Таким образом, отсутствие зеленого — это 0%, а полный зеленый (360 градусов) — это 100%. Может быть, даже с простой анимацией при загрузке графика, если это возможно.

Ваша помощь очень ценится.

css donut-chart

JasonK 11.12.2013 источник

comment

stackoverflow.com/a/19606737/1542290? jsfiddle.net/pMJmF/1 - Mr. Alien 11.12.2013

comment

Сан: Проблема в том, что я не вижу никакого объяснения/кода. Таким образом, я не знаю, что именно нужно для моей упрощенной кольцевой диаграммы. Пример хороший, и это то, что я ищу. Mr. Alien: Я хотел бы использовать CSS, только если это возможно. И скрипка не работает на хроме. - JasonK 11.12.2013

comment

jasonK — когда вы смотрите на ссылку Сана, используйте Firebug в FF или инструменты разработчика в Chrome/safari, чтобы увидеть стиль CSS на кругах. - user3037493 11.12.2013

comment

@user3037493 user3037493 Да, я вижу, проблема в том, что я точно не знаю, что использовать, а что нет. И правда ли, что нужно сделать 2 прямоугольника для обеих половинок, чтобы получить эффект круглого прогресса? - JasonK 12.12.2013

Ответы (5)

arrow_upward
43
arrow_downward

SVG для победы!

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation {
    -webkit-animation: html 1s ease-out forwards;
    animation: html 1s ease-out forwards;
}

.css .circle_animation {
    -webkit-animation: css 1s ease-out forwards;
    animation: css 1s ease-out forwards;
}

@-webkit-keyframes html {
  to {
    stroke-dashoffset: 80; /* 50% would be 220 (half the initial value specified above) */
  }
}

@keyframes html {
  to {
    stroke-dashoffset: 80;
  }
}

@-webkit-keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}

@keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}

<div class="item html">
    <h2>HTML</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
    </svg>
</div>

<div class="item css">
    <h2>CSS</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
     </g>
    </svg>
</div>

версия JSFiddle

Вот версия с фоновыми кругами, как просили в комментариях:

.item {
    position: relative;
    float: left;
}

.item h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
   -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.circle_animation {
  stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 440;
}

.html .circle_animation {
    -webkit-animation: html 1s ease-out forwards;
    animation: html 1s ease-out forwards;
}

.css .circle_animation {
    -webkit-animation: css 1s ease-out forwards;
    animation: css 1s ease-out forwards;
}

@-webkit-keyframes html {
  to {
    stroke-dashoffset: 80; /* 50% would be 220 (half the initial value specified above) */
  }
}

@keyframes html {
  to {
    stroke-dashoffset: 80;
  }
}

@-webkit-keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}

@keyframes css {
  to {
    stroke-dashoffset: 160;
  }
}

<div class="item html">
    <h2>HTML</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#f2f2f2" fill="none"/>
      <circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
     </g>
    </svg>
</div>

<div class="item css">
    <h2>CSS</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#f2f2f2" fill="none"/>
      <circle class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
     </g>
    </svg>
</div>

Как это работает?

stroke-dasharray используется для определения «шаблона» пунктирной линии (MDN). Предоставляя одно значение, вы создаете шаблон с тире 440 пикселей и пробелом 440 пикселей. (440 пикселей — это примерно длина окружности круга).

stroke-dashoffset эффективно перемещает начальную точку шаблона тире (MDN< /а>).

dash-offset из 220 (половина stroke-dasharray) даст полукруг. 110 = четверть круга и т. д.

Turnip 05.02.2015

comment

Хорошо смотритесь! Задавал этот вопрос довольно давно, но я приму его. Спасибо, что поделился. - JasonK; 09.02.2015

comment

Чего я не понимаю, так это как вы определяете процент от 100? Я не понимаю, как вы могли бы сказать 75% или 50%. - Jeremy Miller; 18.02.2015

comment

@JeremyMiller stroke-dasharray используется для определения «шаблона», который использует пунктирная линия (MDN). Предоставляя одно значение, вы создаете шаблон с тире 440 пикселей и пробелом 440 пикселей. (440 пикселей — это примерно длина окружности круга). stroke-dashoffset эффективно перемещает начальную точку шаблона тире (MDN ). dash-offset из 220 (половина stroke-dasharray) даст полукруг. 110 = четверть круга и т. д. - Turnip; 23.02.2015

comment

Отличный пример, который действительно работает. Тем не менее, было бы превосходно, если бы было объяснение того, как это работает. Ваше здоровье - BebopSong; 20.11.2015

comment

У меня отлично работает... кроме Internet Explorer. Добавление префикса -ms- к соответствующим директивам не помогло. У кого-нибудь есть модификация этого решения, которая будет работать в IE? - Anthony DeSimone; 29.02.2016

comment

Этот пример не был совместим, по крайней мере, с IE 9-11 (win7). Вот лучшая кольцевая диаграмма, построенная с помощью CSS+HTM, которую я пока нашел codepen.io/thelifemgmt/pen. /Abyhj - Qin Wang; 31.05.2016

comment

@Репка это фантастика! Есть ли способ создать серую круглую фоновую линию за анимационными цветами? - Krys; 22.10.2016

comment

Если я правильно понимаю, если вы хотите установить его динамическим, вам нужно изменить анимацию ключевых кадров? Если это так, это не будет хорошим решением для чего-то вроде панели инструментов. Поскольку анимация ключевых кадров не может быть изменена в процессе... - Edgar Quintero; 09.11.2019

arrow_upward
8
arrow_downward

Я написал это как ответ на комментарий, но он был слишком длинным:

хм... ну вот скрипка для второго круга http://jsfiddle.net/LgtV2/ .... он состоит из 3 частей пирога. первый круг (100%) состоит из 5 частей. вы должны поиграть со скрипкой, чтобы узнать, как она работает, и чтобы вы могли ее воспроизвести. я никогда не делал этого раньше, и я просто смотрю ссылку, опубликованную Саном, но похоже, что это просто использует несколько Div с css3 TRANSFORM для формирования кривых и псевдоселекторов: до и: после для анимации. Анимации происходят при загрузке самой страницы... Например: : перед загрузкой div1 имеет преобразование 5, загружается и имеет преобразование 8, : после загрузки имеет преобразование 11.

код:

<div class="half_pie">
    <div class="half_part_pie_one half_bar_color half_percentage" data-percentage="35"></div>
    <div class="half_part_pie_two"></div>
    <div class="half_part_pie_three"></div> <span class="half_pie_icon iconfont-android"></span>

</div>

/*percentage STEPS (do not touch)*/
 .full_percentage[data-percentage="100"] {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.full_percentage[data-percentage="95"] {
    -webkit-transform: rotate(170deg);
    -moz-transform: rotate(170deg);
    -o-transform: rotate(170deg);
    transform: rotate(170deg);
}
.full_percentage[data-percentage="90"] {
    -webkit-transform: rotate(155deg);
    -moz-transform: rotate(155deg);
    -o-transform: rotate(155deg);
    transform: rotate(155deg);
}
.full_percentage[data-percentage="85"] {
    -webkit-transform: rotate(125deg);
    -moz-transform: rotate(125deg);
    -o-transform: rotate(125deg);
    transform: rotate(125deg);
}
.full_percentage[data-percentage="80"] {
    -webkit-transform: rotate(110deg);
    -moz-transform: rotate(110deg);
    -o-transform: rotate(110deg);
    transform: rotate(110deg);
}
.full_percentage[data-percentage="75"] {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.full_percentage[data-percentage="70"] {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    transform: rotate(70deg);
}
.full_percentage[data-percentage="65"] {
    -webkit-transform: rotate(55deg);
    -moz-transform: rotate(55deg);
    -o-transform: rotate(55deg);
    transform: rotate(55deg);
}
.full_percentage[data-percentage="60"] {
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}
.full_percentage[data-percentage="55"] {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
}
.full_percentage[data-percentage="50"] {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.half_percentage[data-percentage="50"] {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.half_percentage[data-percentage="45"] {
    -webkit-transform: rotate(170deg);
    -moz-transform: rotate(170deg);
    -o-transform: rotate(170deg);
    transform: rotate(170deg);
}
.half_percentage[data-percentage="40"] {
    -webkit-transform: rotate(155deg);
    -moz-transform: rotate(155deg);
    -o-transform: rotate(155deg);
    transform: rotate(155deg);
}
.half_percentage[data-percentage="35"] {
    -webkit-transform: rotate(125deg);
    -moz-transform: rotate(125deg);
    -o-transform: rotate(125deg);
    transform: rotate(125deg);
}
.half_percentage[data-percentage="30"] {
    -webkit-transform: rotate(110deg);
    -moz-transform: rotate(110deg);
    -o-transform: rotate(110deg);
    transform: rotate(110deg);
}
.half_percentage[data-percentage="25"] {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.half_percentage[data-percentage="20"] {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    transform: rotate(70deg);
}
.half_percentage[data-percentage="15"] {
    -webkit-transform: rotate(55deg);
    -moz-transform: rotate(55deg);
    -o-transform: rotate(55deg);
    transform: rotate(55deg);
}
.half_percentage[data-percentage="10"] {
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}
.half_percentage[data-percentage="5"] {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
}
.half_percentage[data-percentage="0"] {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
/*
 *
 * THE SECOND EXAMPLE
 * the second example for a max percentuage of 50% in this case
 *
 */

/*COLOR and STYLES (note: you can use gradients for the class full_bar_color)*/
 .half_bar_color {
    background: #3498db;
}
/*start chart pie code*/
 .half_pie {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
}
/*the background white circular color*/
 .half_pie:before {
    content:'';
    display: block;
    position: absolute;
    z-index: -1;
    width: 220px;
    height: 220px;
    top: -10px;
    left: -10px;
    background: #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
}
/*color white #fff to fix the rendering problem*/
 .half_pie:after {
    content:'';
    display: block;
    position: absolute;
    z-index: 10;
    width: 198px;
    height: 198px;
    top: 1px;
    left: 1px;
    -webkit-box-shadow: 0px 0px 0px 2px #fff, inset 0 0 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 0px 2px #fff, inset 0 0 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 0px 2px #fff, inset 0 0 5px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
}
/*the icon*/
 span.half_pie_icon {
    position: absolute;
    z-index: 5;
    top: 25px;
    left: 25px;
    width: 150px;
    height: 150px;
    font-size: 3em;
    line-height: 150px;
    text-align: center;
    color: #e0e0e0;
    background: #fff;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
}
/*ONE*/
 .half_part_pie_one {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    clip: rect(0px 100px 200px 0px);
}
/*TWO*/
 .half_part_pie_two {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    clip: rect(0px 100px 200px 0px);
}
/*THREE*/
 .half_part_pie_three {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    clip: rect(0px 200px 200px 100px);
    -webkit-animation: half_third 4s linear;
    -moz-animation: half_third 4s linear;
    -o-animation: half_third 4s linear;
    animation: half_third 4s linear;
    opacity: 0;
}
/*THIRD animation*/
 @-webkit-keyframes half_third {
    0% {
        opacity: 1;
        -webkit-transform: rotate(0deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: rotate(180deg);
    }
}
@-moz-keyframes half_third {
    0% {
        opacity: 1;
        -moz-transform: rotate(0deg);
    }
    100% {
        opacity: 1;
        -moz-transform: rotate(180deg);
    }
}
@-o-keyframes half_third {
    0% {
        opacity: 1;
        -o-transform: rotate(0deg);
    }
    100% {
        opacity: 1;
        -o-transform: rotate(180deg);
    }
}
@keyframes half_third {
    0% {
        opacity: 1;
        transform: rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: rotate(180deg);
    }
}

user3037493 11.12.2013

arrow_upward
7
arrow_downward

Я изменил фрагмент, который нашел в Интернете, чтобы сделать простую кольцевую диаграмму, используя только HTML и CSS, вот результат:

.block {
  margin: 25px 25px 0 0;
  background: #394264;
  border-radius: 5px;
  float: left;
  width: 300px;
  overflow: hidden;
}

.donut-chart-block {
  overflow: hidden;
}

.donut-chart {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 2rem auto;
  border-radius: 100%
}

.donut-chart .center {
  background: #394264;
  position: absolute;
  top: 30px;
  left: 30px;
  height: 140px;
  width: 140px;
  border-radius: 70px;
}

.clip {
  border-radius: 50%;
  clip: rect(0px, 200px, 200px, 100px);
  height: 100%;
  position: absolute;
  width: 100%;
}

.item {
  border-radius: 50%;
  clip: rect(0px, 100px, 200px, 0px);
  height: 100%;
  position: absolute;
  width: 100%;
  font-family: monospace;
  font-size: 1.5rem;
}

#section1 {
  transform: rotate(0deg);
}

#section1 .item {
  background-color: #E64C65;
  transform: rotate(76deg);
}

#section2 {
  transform: rotate(76deg);
}

#section2 .item {
  background-color: #11A8AB;
  transform: rotate(140deg);
}

#section3 {
  transform: rotate(215deg);
}

#section3 .item {
  background-color: #4FC4F6;
  transform: rotate(113deg);
}

#section4 {
  transform: rotate(-32deg);
}

#section4 .item {
  background-color: #FCB150;
  transform: rotate(32deg);
}

<div class="container">
  <div class="donut-chart-block block">
    <div class="donut-chart">
      <div id="section1" class="clip">
        <div class="item" data-rel="21"></div>
      </div>
      <div id="section2" class="clip">
        <div class="item" data-rel="39"></div>
      </div>
      <div id="section3" class="clip">
        <div class="item" data-rel="31"></div>
      </div>
      <div id="section4" class="clip">
        <div class="item" data-rel="9"></div>
      </div>
      <div class="center"></div>
    </div>
  </div>
</div>

Решил опубликовать его здесь в качестве альтернативы другим ответам. Ваше здоровье!

Thomas C. G. de Vilhena 14.04.2016

comment

все, что выше 50 градусов, запутывается! - David Lozzi; 26.05.2016

arrow_upward
7
arrow_downward

Этот ответ возможен только из-за ответа Репы, но я внес несколько существенных изменений и объясню, как это работает:

.donutContainer {
    position: relative;
    float: left;
}

.donutContainer h2 {
    text-align:center;
    position: absolute;
    line-height: 125px;
    width: 100%;
}

svg {
    transform: rotate(-90deg);
}

.donut {
  stroke-dasharray: 440;
  -webkit-animation: donut 1s ease-out forwards;
  animation: donut 1s ease-out forwards;
}

@-webkit-keyframes donut {
  from {
    stroke-dashoffset: 440;
  }
}

@keyframes donut {
  from {
    stroke-dashoffset: 440;
  }
}

<div class="donutContainer">
    <h2>donut</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" style="stroke-dashoffset: 160;/* 160 of 440 */" class="donut" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/>
     </g>
    </svg>
</div>
<div class="donutContainer">
    <h2>donut 2</h2>
    <svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
     <g>
      <title>Layer 1</title>
      <circle id="circle" style="stroke-dashoffset: 220;/* 220 of 440 */" class="donut" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#FEC007" fill="none"/>
     </g>
    </svg>
</div>

Поскольку анимация использует from вместо to для создания анимации, браузеры, которые не поддерживают анимацию, будут показывать кольцевую диаграмму завершенной, а не вообще. Это также позволяет изменять цвет части кольцевой диаграммы только с помощью встроенного CSS, и одна и та же анимация CSS может работать для любого количества кольцевых диаграмм.

Объяснение для svg материала:

stroke-dasharray: В данном случае это общая длина окружности.

stroke-dashoffset: часть круга, которая закрашена. Ноль (0) означает, что все закрашено (100%), 440 (или любое другое значение окружности, которое вы установили), если ни одна часть круга не закрашена (0%)

Атрибуты элемента circle:

r: радиус окружности

cx: центр X. центр круга (координата X от нижнего левого угла элемента svg)

cy: центр Y. центр круга (координата Y от нижнего левого угла элемента svg)

stroke-width: ширина штриха, которым будет нарисован пончик.

stroke: цвет пончика

Skeets 10.01.2018

arrow_upward
3
arrow_downward

Если вам нужно создать анимацию кольцевой диаграммы (просто css), а также вам нужно несколько цветов для нее, проверьте пример codepen, который я создал.

http://codepen.io/hilar47/pen/RprXev

<div class="container">
  <div class="donut-chart-block block"> 
    <div class="donut-chart">
        <div id="part1" class="portion-block"><div class="circle"></div></div>
        <div id="part2" class="portion-block"><div class="circle"></div></div>
        <div id="part3" class="portion-block"><div class="circle"></div></div>
        <p class="center"></p>        
    </div>

Hilario Goes 02.03.2017

Простая кольцевая диаграмма CSS3

Ответы (5)

Как это работает?

Вопросы по теме