Проблема в том, что моя круговая диаграмма меньше

Я создал круговую диаграмму, используя только HTML5 и CSS3, и она отлично работает. Проблема, однако, в том, что я сделал слишком большой пирог.Проблема в том, что моя круговая диаграмма меньше

Я хочу, чтобы пирог был около 50% - 75% от его текущего размера. Как мне это сделать?

Вот JSFiddle; LINK

HTML:

<body> 
<div> 
    <div id="PieChartLeft"> 
     <div class="pie"></div> 
    </div> 
    <div id="PieChartLeftValue"> 
     <div class="pie"></div> 
    </div> 
</div>

CSS:

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

#PieChartLeft, #PieChartLeftValue { 
    -moz-transform:rotate(270deg); 
    -webkit-transform:rotate(270deg); 
    -o-transform:rotate(270deg); 
    transform:rotate(270deg); 
    position:absolute; 
    width:200px; 
    height:200px; 
    clip:rect(0px,200px,200px,100px); 
    left:300px; 
} 

#PieChartLeft .pie { 
    background-color:salmon; 
    border-color:salmon; 
    -moz-transform:rotate(180deg); 
    -webkit-transform:rotate(180deg); 
    -o-transform:rotate(180deg); 
    transform:rotate(180deg); 
} 

#PieChartLeftValue .pie { 
    background-color:grey; 
    border-color:grey; 
    -moz-transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
    -o-transform:rotate(90deg); 
    transform:rotate(90deg); 
}

источник

2014-10-31 Yen

Вы хотите, чтобы это было отзывчивым? Вы можете просто настроить значения или использовать прокладку. – KreaTief

@ KreaTief, желательно, да. – Yen

Хорошо, я напишу вам демо, должно быть довольно просто – KreaTief

уже получил его, оказывается, я просто должен был изменить это;

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

В эту:

.pie { 
    position:absolute; 
    width:150px; 
    height:150px; 
    clip:rect(0px,75px,150px,0px); 
    -moz-border-radius:100px; 
    -webkit-border-radius:100px; 
    border-radius:75px; 
}

Другими словами, опустить ширину & высоту до все, что хочу, а затем отредактировать второе значение в клипе: прямоугольника() к половине ширины и 3-е значение к значению высоты. Затем радиус границы до половины ширины.

источник

2014-10-31 09:34:45 Yen

Ваше решение уменьшит график, если вы хотите, чтобы ваша карта была настроена, вы будете использовать другой подход. Я написал вам код. Просто измените переменную $width на любое процентное значение, которое вы хотите, затем нажмите на глаз сверху, чтобы увидеть скомпилированный css.

http://codepen.io/bekreatief/pen/liHBs

источник

2014-10-31 10:13:01 KreaTief

Проблема в том, что моя круговая диаграмма меньше

ответ

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