Question

我试图通过在标记中添加不同的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>

Answer 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函数中添加另一个参数，即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饼图

1 个答案: