无法获得多个画布饼图答案

【问题标题】：Not able to get multiple Canvas Pie Charts无法获得多个画布饼图
【发布时间】：2015-06-26 07:52:33
【问题描述】：

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

我无法获得多个画布图表。

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

我在下面附上我的代码：

<!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>

【问题讨论】：

您想在同一个画布上放置多个饼图还是需要多个画布？
@ Niddro ......我想使用画布在同一页面上为不同数据使用不同的饼图。

标签： javascript html canvas gsp

【解决方案1】：

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

这使您可以决定将饼图放置在何处以及使用哪些数据。

同一画布上的饼图

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>

不同画布上的饼图

要实现这一点，只需向您的 plotData 函数添加另一个参数，即画布 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>

【讨论】：

如何使用具有不同“画布 id”的不同饼图。