javascript - CSS中的统计圈

Question

我想做这样的事情，但我不知道怎么做。

我有一个想法，但它不起作用。

<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>

score 6 · Accepted Answer

它实际上被称为甜甜圈图。你很难只使用 div 标签。而是使用画布或仅使用 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();                 


});

注意：var values = '24,43,43,45'; // 这将基本上把圆圈分成 4 部分 Demo: http://jsfiddle.net/Zgfb6/

score 1 · Accepted Answer

一种方法是只使用一个图表框架，它支持像d3js这样的圆环图。

使用 d3js 制作的示例：

score 0 · Accepted Answer

以下是在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;
}

score 0 · Accepted Answer

您还可以使用Highcharts，更具体地说是highcharts-chart（Highcharts 的 web 组件）来获得这样的图表：

执行：

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查看图表。

javascript - CSS中的统计圈

4 回答 4

Related

Reference