无法获得多个 Canvas 个饼图

Question

我试图通过在标签中添加不同的 ID 来获取多个 canvas 饼图。但它不起作用。

我无法获得多个 canvas 图表。

请提出一些可以解决我的问题的修改建议。

我在下面附上我的代码：

<!doctype html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Canvas Test</title>
</head>

<body>
    <section>
        <div>
            <canvas id="canvas" width="400" height="300">
                This text is displayed if your browser does not support HTML5 Canvas.
            </canvas>
        </div>

        <script type="text/javascript">
            var myColor = ["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"];
            var myData = [10, 30, 20, 60, 40];

            function getTotal() {
                var myTotal = 0;
                for (var j = 0; j < myData.length; j++) {
                    myTotal += (typeof myData[j] == 'number') ? myData[j] : 0;
                }
                return myTotal;
            }

            function plotData() {
                var canvas;
                var ctx;
                var lastend = 0;
                var myTotal = getTotal();

                canvas = document.getElementById("canvas");
                ctx = canvas.getContext("2d");
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                for (var i = 0; i < myData.length; i++) {
                    ctx.fillStyle = myColor[i];
                    ctx.beginPath();
                    ctx.moveTo(200, 150);
                    ctx.arc(200, 150, 150, lastend, lastend +
                        (Math.PI * 2 * (myData[i] / myTotal)), false);
                    ctx.lineTo(200, 150);
                    ctx.fill();
                    lastend += Math.PI * 2 * (myData[i] / myTotal);
                }
            }

            plotData();
        </script>
    </section>
</body>

</html>

Answer 1

您可以稍微修改 plotData 函数，使其允许颜色和百分比等参数，还允许 x 和 y 坐标以及饼图半径。然后您可以为您的饼图数据和颜色创建二维数组。

这使您可以决定放置饼图的位置以及使用哪些数据。

同一饼图canvas

var myColor = [["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"],
              ["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"]];
            var myData = [[10, 30, 20, 60, 40],
                         [20, 5, 15, 50, 40]];

function getTotal(data) {
    var myTotal = 0;
    for (var j = 0; j < data.length; j++) {
        myTotal += (typeof data[j] == 'number') ? data[j] : 0;
    }
    return myTotal;
}

function plotData(x,y,r,data,colors) {
    var canvas;
    var ctx;
    var lastend = 0;
    var myTotal = getTotal(data);
    
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    //ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    for (var i = 0; i < data.length; i++) {
        ctx.fillStyle = colors[i];
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.arc(x, y, r, lastend, lastend +
                (Math.PI * 2 * (data[i] / myTotal)), false);
        ctx.lineTo(x, y);
        ctx.fill();
        lastend += Math.PI * 2 * (data[i] / myTotal);
    }
}

plotData(100,50,50,myData[0],myColor[0]);
plotData(100,180,80,myData[1],myColor[1]);

<canvas id="canvas" width="400" height="300">
                This text is displayed if your browser does not support HTML5 Canvas.
            </canvas>

不同 canvases

上的饼图

为此，只需向 plotData 函数添加另一个参数，即 canvas id。请参阅下面的示例。

var myColor = [["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"],
              ["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"]];
            var myData = [[10, 30, 20, 60, 40],
                         [20, 5, 15, 50, 40]];

function getTotal(data) {
    var myTotal = 0;
    for (var j = 0; j < data.length; j++) {
        myTotal += (typeof data[j] == 'number') ? data[j] : 0;
    }
    return myTotal;
}

function plotData(x,y,r,data,colors,c_id) {
    var canvas;
    var ctx;
    var lastend = 0;
    var myTotal = getTotal(data);
    
    canvas = document.getElementById(c_id);
    ctx = canvas.getContext("2d");
    //ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    for (var i = 0; i < data.length; i++) {
        ctx.fillStyle = colors[i];
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.arc(x, y, r, lastend, lastend +
                (Math.PI * 2 * (data[i] / myTotal)), false);
        ctx.lineTo(x, y);
        ctx.fill();
        lastend += Math.PI * 2 * (data[i] / myTotal);
    }
}

plotData(75,50,50,myData[0],myColor[0],"canvas_1");
plotData(75,50,50,myData[1],myColor[1],"canvas_2");

canvas {
  border: 1px solid black;
  }

<canvas id="canvas_1" width="150" height="200"></canvas>
<canvas id="canvas_2" width="150" height="200"></canvas>

无法获得多个 Canvas 个饼图

Not able to get multiple Canvas Pie Charts

html

javascript

canvas

gsp