Статистические круги в CSS

Я хотел бы сделать что-то подобное, но я не знаю, как это сделать.Статистические круги в CSS

У меня есть идея, но она не работает.

<div id="stats"> 
    <div id="men" class="circle"></div> 
    <div id="women" class="circle"></div> 
    <div id="white-circle" class="small-circle"></div> 
</div> 

<style> 
#stats { 
    width: 100px; 
    height: 100px; 
    background: white; 
    position: relative; 
} 

.circle { 
    border-radius: 100px; 
    background: #CCC; 
    width: 100px; 
    height: 100px; 
    position: absolute; 
} 

.circle#men { 
    background: #27ae60; 
} 

.circle#women { 
    background: #f26646; 
} 

.small-circle { 
    border-radius: 100px; 
    background: white; 
    width: 65px; 
    height: 65px; 
    position: absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 
    margin: auto; 
} 
</style>

источник

2013-08-13 Steffi

Если вы хотите сделать это сами, вам придется использовать SVG (сгенерировать его с помощью javascript), но там есть много хороших библиотек диаграмм для javascript, вам просто нужно немного поискать – x4rf41

чистый CSS? – Steffi

Я дал полное воплощение в своем ответе, если вам не нравится писать его в SVG. –

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

Примеры сделаны с d3js:

источник

2013-08-13 08:07:27 fyr

+1 Я использовал это в прошлом, и он отлично подходит для представления статистической информации. – zik

Это на самом деле называется кольцевой диаграммы. Вам будет сложно использовать тег div. Вместо этого используйте canvas или просто используйте фреймворк javascript для построения диаграмм. Вот несколько примеров.

<canvas></canvas>

разметки

<canvas width="500px" height="250px"></canvas>

JavaScript

$(document).ready(function() { 

    var context = $("canvas")[0].getContext("2d"); 

     var values = '24,43,43,45'; 
     var segments = values.split(","); 
     var segmentColor = 50; 
     var total = 0; 

     //Reset the canvas 
     context.restore(); 
     context.save(); 
     context.clearRect(0,0,500,250); 

     for (i=0;i<segments.length;i++) { 
      total = total + parseFloat(segments[i]); 
     } 

     var parts = 360/total; 
     var startAngle=0 

     context.translate(100,100) 
     context.rotate(270*(Math.PI/180)); //Turn the chart around so the segments start from 12 o'clock 

     for (i=0;i<segments.length;i++) { 

      //Draw the segments 
      context.fillStyle ="rgb(" + segmentColor + "," + segmentColor + "," + segmentColor + ")"; 
      context.beginPath(); 
      context.moveTo(0,0); 
      context.arc(0,0,100,startAngle*(Math.PI/180),(startAngle + parseFloat(segments[i]*parts))*(Math.PI/180),false); 
      context.lineTo(0,0); 
      context.closePath(); 
      context.fill(); 

      startAngle = startAngle + parseFloat(segments[i]*parts); 
      segmentColor = segmentColor + 20; 
     } 

      //Turn into a donut!!     
      context.fillStyle = "White"; 
      context.beginPath(); 
      context.arc(0,0,60,0,Math.PI*2,false); 
      context.closePath(); 
      context.fill();     


});

Примечание: значения вар = '24, 43,43,45' ; // Это будет basicall разделить круг на 4 части Demo: http://jsfiddle.net/Zgfb6/

источник

2013-08-13 08:13:19

Это, по сути, только ответ на ссылку, было бы лучше включить образец того, как использовать 'canvas' для соответствия требованиям – musefan

Я только что редактировал свое сообщение –

Ни в коем случае в чистом CSS? – Steffi

Вот как сделать круги в CSS:

Если вы знаете, как сделать квадрат в CSS вам нужно только добавить border-radius: 100% в CSS. Это преобразует квадрат в круг.Вот еще немного кода для решения вашего вопроса:

<html> 
    <head> 
     <title> Disappering Circles </title> 
     <link rel="stylesheet" type="text/css" href="css.css"> 
    </head> 
    <body> 
     <div id="red"></div> 
     <div id="blue"></div> 
     <div id="yellow"></div> 
     <script type="text/javascript"></script> 
    </body> 
</html>

Вот это CSS:

#red { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    display: inline-block; 
    border-radius: 100% 
} 
#blue{ 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    display: inline-block; 
} 
#yellow{ 
    width: 100px; 
    height: 100px; 
    background-color: yellow; 
    display: inline-block; 
}

источник

2017-03-13 17:07:17

Вы также можете использовать Highcharts, а более конкретно highcharts-chart (веб-компонент Highcharts) в получить график, как это:

Implementat иона:

chart.data = [{ 
 
    name: 'Clients', 
 
    size: "100%", 
 
    innerSize: "60%", 
 
    showInLegend: true, 
 
    dataLabels: {enabled: false}, 
 
    data: [ 
 
    {name: "Men", y: 2258, color: '#20ad61'}, 
 
    {name: "Women", y: 5023, color: '#f26645'}, 
 
    ], 
 
}] 
 

 
chart.legendOptions = { 
 
    enabled: true, 
 
    layout: 'vertical', 
 
    align: 'right', 
 
    verticalAlign: 'middle', 
 
    labelFormatter: function() {return Math.round(this.y/7281*100)+"% "+this.name}, 
 
} 
 

 
chart.chartOptions = {spacingLeft: 0,} 
 

 
chart.highchartOptions = { 
 
    title: { 
 
    verticalAlign: 'middle', 
 
    y: -2 
 
    }, 
 
    subtitle: { 
 
    verticalAlign: 'middle' 
 
    }, 
 
}

#chart { 
 
    width: 23em; 
 
    height: 10em 
 
} 
 

 
#chart .highcharts-point {rx: initial; ry: initial}

<base href="https://user-content-dot-custom-elements.appspot.com/avdaredevil/highcharts-chart/v2.0.1/highcharts-chart/"> 
 
<link rel="import" href="highcharts-chart.html"> 
 

 
<highcharts-chart id='chart' title='<b>7,281</b>' subtitle='CLIENTS' type="pie" title="" label="Gender" legend height-responsive></highcharts-chart>

Примечание: Нажмите Run Code Snippet, чтобы увидеть диаграмму.

источник

2017-03-13 21:18:11

Статистические круги в CSS

ответ

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