使用html js j在3D中繪制畫布餅圖

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

使用以下示例使用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");
});