Question

我需要帮助才能使用JavaScript绘制饼图。我使用Ajax获取数据并在仪表板的饼图内正确获取数据。请记住，我使用Ajax获取数据。

Answer 1

这是您可以做的一个简单示例。您可以在Paths中使用与JavaScript相关的方法，显然，请调整代码以使用Ajax文件中的值来包含饼图的准确，最新表示。

＆＃13;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function toRadians(deg) {
    return deg * Math.PI / 180 //Converts degrees into radians
}

function startTop(deg) {
    return toRadians(deg - 90); //Positions 0deg at the top of the circle instead of the left or east of the circle
}

var cx = 100; //Centre of the circle, x co-ord
var cy = 75; //Centre of the circle, y co-ord
var radius = 50; //Radius of the circle

ctx.beginPath(); //Begins drawing the path. See link in "Edit" section
ctx.moveTo(cx,cy); //Moves the beginning position to cx, cy (100, 75)
ctx.arc(cx, cy, radius, startTop(0), startTop(50)); //	ctx.arc(cx, cy, radius, startAngle, endAngle, counterclockwise (optional));
ctx.lineTo(cx,cy); //Draws lines from the ends of the arc to cx and cy
ctx.closePath(); //Finishes drawing the path
ctx.fill(); //Actually draws the shape (and fills)
//Can use ctx.stroke() if you just want the border

ctx.beginPath();
ctx.fillStyle = "#c82124"; //Changes the color
ctx.moveTo(cx,cy);
ctx.arc(cx,cy,radius, startTop(50),startTop(168));
ctx.lineTo(cx,cy);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.fillStyle = "#3370d4";
ctx.moveTo(cx,cy);
ctx.arc(cx,cy,radius, startTop(168),startTop(360));
ctx.lineTo(cx,cy);
ctx.closePath();
ctx.fill();

＆＃13;

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

＆＃13;

修改
请参阅路径方法

beginPath()
closePath()
arc()
moveTo()
lineTo
fill()
stroke()
fillStyle()

编辑2
虽然我对Ajax不熟悉，但您可以执行类似JSFiddle

使用js绘制PieChart

1 个答案: