1. дома
  2. Вопрос и ответ
  3. CSS3 простая диаграмма пончиков

CSS3 простая диаграмма пончиков

2013-12-11 2 views
12

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

То, что я до сих пор: 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; 
}

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

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

источник

2013-12-11 JasonK

+1

http://stackoverflow.com/a/19606737/1542290? http://jsfiddle.net/pMJmF/1/ –

+0

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

+0

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

ответ

29

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 id="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 id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#69aff4" fill="none"/> 
 
    </g> 
 
    </svg> 
 
</div>

JSFiddle version

источник

2015-02-05 13:48:54 Turnip

+0

Хорошо выглядит! На вопрос об этом довольно давно, но я соглашусь. Спасибо, что поделился. – JasonK

+4

Что я не понимаю, так это то, как вы определяете процент 100? Я не понимаю, как вы сказали бы 75% или 50%. –

+2

@JeremyMiller 'stroke-dasharray' используется для определения« шаблона », в котором используется пунктирная линия ([MDN] (https: //developer.mozilla.орг/EN-US/Docs/Web/SVG/Атрибут/штрих-dasharray)). Предоставляя одно значение, вы создаете шаблон с тире 440px и объемом 440px. (440px - это примерно окружность круга). 'stroke-dashoffset' эффективно перемещает начальную точку тире ([MDN] (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset)). «Дефис-смещение» 220 (половина «удара-дашара») произведет полукругу. 110 = четверть круга и т. Д. – Turnip

8

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

гм ... ну, вот скрипка на второй круг http://jsfiddle.net/LgtV2/ .... он имеет 3 секторные части. первый круг (100%) имеет 5 частей. вы должны играть со скрипкой, чтобы узнать, как она работает, и чтобы вы могли ее воспроизвести. я никогда не делал этого раньше, и я просто смотрю ссылку San, но похоже, что это просто использует несколько Divs с css3 TRANSFORM для формирования кривых и псевдоселекторов: before и: after для анимаций. Анимации происходят, когда сама страница загружается ... EG:: до того, как 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); 
    } 
}

источник

2013-12-11 21:04:37 user3037493

+0

работает только для значений до 50, половина круга –

1

Я изменил фрагмент я нашел в Интернете, чтобы сделать простую кольцевую диаграмму, используя только 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>

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

источник

2016-04-14 13:19:44

+0

anyhting over 50deg get запутался! –

1

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

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>

источник

2017-03-02 13:31:04

1

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

.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 css"> 
 
    <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 css"> 
 
    <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: "center Y". центр окружности (Y координаты от нижней левой части svg элемента)

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

stroke: цвет бублика

источник

2018-01-10 06:50:50

Смежные вопросы

 Смежные вопросы