Question

我想要这样的圆环图。

如何创建它？我不确定这是正确的过程。

非常感谢你。

Answer 1

上面的甜甜圈图表可以使用Html 5画布完成。

Html代码：

<canvas id="canvas" width=325 height=325></canvas>

JavaScript代码：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var colors=['skyblue','gray','orange'];
var values=[47,6,47];
var labels=['Voluntary','Robot','Mandatory'];

dmbChart(150,150,125,25,values,colors,labels,0);

function dmbChart(cx,cy,radius,arcwidth,values,colors,labels,selectedValue){
    var tot=0;
    var accum=0;
    var PI=Math.PI;
    var PI2=PI*2;
    var offset=-PI/2;
    ctx.lineWidth=arcwidth;
    for(var i=0;i<values.length;i++){tot+=values[i];}
    for(var i=0;i<values.length;i++){
        ctx.beginPath();
        ctx.arc(cx,cy,radius,
            offset+PI2*(accum/tot),
            offset+PI2*((accum+values[i])/tot)
        );
        ctx.strokeStyle=colors[i];
        ctx.stroke();
        accum+=values[i];
    }
    var innerRadius=radius-arcwidth-3;
    ctx.beginPath();
    ctx.arc(cx,cy,innerRadius,0,PI2);
    ctx.fillStyle=colors[selectedValue];
    ctx.fill();
    ctx.textAlign='center';
    ctx.textBaseline='bottom';
    ctx.fillStyle='white';
    ctx.font=(innerRadius)+'px verdana';
    ctx.fillText(values[selectedValue],cx,cy+innerRadius*.9);
    ctx.font=(innerRadius/4)+'px verdana';
    ctx.fillText(labels[selectedValue],cx,cy-innerRadius*.25);
}

Answer 2

参考此链接http://www.highcharts.com/demo/gauge-activity 这里有大量的免费图表，只需很少的动画，您的网站就会看起来很动态。它们提供了一个很好的功能，可以在jsfiddle中编辑它，并在你的合并之前测试它。

3D圆环图 http://www.highcharts.com/demo/3d-pie-donut

Answer 3

以下是使用Javascript，

的谷歌图表中的一些代码示例

如果您想要更复杂的图表，可以使用this

使用jsfiddle示例的更多图表可以很好here

＆＃13;

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }

＆＃13;

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="donut_single" style="width: 900px; height: 500px;"></div>

＆＃13;

Html，CSS - 如何创建这样的圆环图？

3 个答案: