Question

我有一个使用canvas2d通过HTML和JavaScript创建的工作二维饼图。是否有可能通过使用HTML，CSS，js或jQuery在3d中使用相同的东西。如果没有，是否有任何高级图形选项，如分割饼图并显示它，但首选3d。提前谢谢。

SELECT cast(the_nvarchar_column_name as varchar) ...

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);

}

Answer 1

使用html，css，javascript：

使用此example

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");
});

使用html js j的3d画布饼图

1 个答案: