javascript - 使用 html js j 绘制 3D Canvas 饼图

Question

我有一个通过 HTML 和 JavaScript 使用 canvas2d 创建的可用二维饼图。是否也可以通过使用 HTML、CSS、js 或 jQuery 在 3d 中拥有以下相同的内容。如果没有，是否有任何高级图形选项，例如拆分饼图并显示它，但首选 3d。提前致谢。

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

ctx.lineWidth = 2;
ctx.font = '12px verdana';
ctx.textAlign='center';
ctx.textBaseline='middle';

var PI2 = Math.PI * 2;
var myColor = ['green','blue'];
var myData = [chv2,chs2];
var labels =["LA:" +chv2+"%","LB:" +chs2+"%"];
var cx = 150;
var cy = 150;
var radius = 100;

pieChart(myData, myColor);

function pieChart(data, colors) {

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

  var sweeps = [];
  for (var i = 0; i < data.length; i++) {
    sweeps.push(data[i] / total * PI2);
  }

  var accumAngle = 0;
  for (var i = 0; i < sweeps.length; i++) {
    drawWedge(accumAngle, accumAngle + sweeps[i], colors[i], labels[i]);
    accumAngle += sweeps[i];
  }

}

function drawWedge(startAngle, endAngle, fill, label) {

  // draw the wedge
  ctx.beginPath();
  ctx.moveTo(cx, cy);
  ctx.arc(cx, cy, radius, startAngle, endAngle, false);
  ctx.closePath();
  ctx.fillStyle = fill;
  ctx.strokeStyle = 'black';
  ctx.fill();
  ctx.stroke();

  // draw the label
  var midAngle = startAngle + (endAngle - startAngle) / 2;
  var labelRadius = radius * .75;
  var x = cx + (labelRadius) * Math.cos(midAngle);
  var y = cy + (labelRadius) * Math.sin(midAngle);
  ctx.fillStyle = 'white';
  ctx.fillText(label, x, y);

}

<canvas id="canvas" width="300" height="300" style="display:none;" >
    This text is displayed if your browser does not support HTML5 Canvas.
    </canvas>

Answer 1

使用这个example使用 html、css、javascript:

var chart;
var legend;

var chartData = [{
    country: "Lithuania",
    value: 260}, 
    /* more values ... */];

AmCharts.ready(function() {
    // PIE CHART
    chart = new AmCharts.AmPieChart();
    chart.dataProvider = chartData;
    chart.titleField = "country";
    chart.valueField = "value";
    chart.outlineColor = "";
    chart.outlineAlpha = 0.8;
    chart.outlineThickness = 2;
    // this makes the chart 3D
    chart.depth3D = 20;
    chart.angle = 30;

    // WRITE
    chart.write("chartdiv");
});