HTML页面的一行中有多个圆环图和饼图

，可以通过使用HTML5的Canvas元素和JavaScript来实现。

首先，Canvas元素是HTML5中的一个标签，可以用于绘制图形，包括圆环图和饼图。通过Canvas，我们可以使用JavaScript来绘制和操作图形。

对于圆环图，可以使用Canvas的绘制弧形的方法来实现。可以通过设置圆心坐标、半径、起始角度和结束角度来绘制一个圆环。可以使用不同的颜色来表示不同的数据。

对于饼图，也可以使用Canvas的绘制弧形的方法来实现。可以通过设置圆心坐标、半径、起始角度和结束角度来绘制一个扇形。可以根据数据的比例来计算每个扇形的角度，并使用不同的颜色来表示不同的数据。

在HTML页面中，可以使用多个Canvas元素来实现多个圆环图和饼图。可以设置每个Canvas元素的位置和大小，使它们在一行中排列。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Donut and Pie Charts</title>
    <style>
        .chart {
            display: inline-block;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div class="chart">
        <canvas id="chart1" width="200" height="200"></canvas>
    </div>
    <div class="chart">
        <canvas id="chart2" width="200" height="200"></canvas>
    </div>
    <div class="chart">
        <canvas id="chart3" width="200" height="200"></canvas>
    </div>

    <script>
        // 绘制圆环图
        function drawDonutChart(canvasId, data, colors) {
            var canvas = document.getElementById(canvasId);
            var ctx = canvas.getContext("2d");
            var centerX = canvas.width / 2;
            var centerY = canvas.height / 2;
            var radius = canvas.width / 3;

            var total = 0;
            for (var i = 0; i < data.length; i++) {
                total += data[i];
            }

            var startAngle = 0;
            for (var i = 0; i < data.length; i++) {
                var endAngle = startAngle + (data[i] / total) * 2 * Math.PI;

                ctx.beginPath();
                ctx.arc(centerX, centerY, radius, startAngle, endAngle);
                ctx.lineWidth = 50;
                ctx.strokeStyle = colors[i];
                ctx.stroke();

                startAngle = endAngle;
            }
        }

        // 绘制饼图
        function drawPieChart(canvasId, data, colors) {
            var canvas = document.getElementById(canvasId);
            var ctx = canvas.getContext("2d");
            var centerX = canvas.width / 2;
            var centerY = canvas.height / 2;
            var radius = canvas.width / 3;

            var total = 0;
            for (var i = 0; i < data.length; i++) {
                total += data[i];
            }

            var startAngle = 0;
            for (var i = 0; i < data.length; i++) {
                var endAngle = startAngle + (data[i] / total) * 2 * Math.PI;

                ctx.beginPath();
                ctx.moveTo(centerX, centerY);
                ctx.arc(centerX, centerY, radius, startAngle, endAngle);
                ctx.closePath();
                ctx.fillStyle = colors[i];
                ctx.fill();

                startAngle = endAngle;
            }
        }

        // 数据和颜色
        var data1 = [30, 40, 50];
        var colors1 = ["red", "green", "blue"];
        var data2 = [20, 30, 50];
        var colors2 = ["orange", "yellow", "purple"];
        var data3 = [10, 20, 70];
        var colors3 = ["pink", "gray", "brown"];

        // 绘制圆环图和饼图
        drawDonutChart("chart1", data1, colors1);
        drawPieChart("chart2", data2, colors2);
        drawDonutChart("chart3", data3, colors3);
    </script>
</body>
</html>

在上述示例代码中，我们使用了三个Canvas元素来绘制三个圆环图和饼图。每个Canvas元素都有一个唯一的id，通过JavaScript代码调用绘制函数来绘制图形。通过设置CSS样式，使每个图形在一行中排列。

请注意，上述示例代码仅为演示目的，实际应用中可能需要根据具体需求进行修改和优化。

推荐的腾讯云相关产品和产品介绍链接地址：