html怎么将坐标轴变成百分比

在HTML中，要实现将坐标轴变成百分比的效果，通常需要使用CSS和JavaScript进行配合，这里，我将详细地介绍如何通过这三个技术手段来实现这一功能，以下内容将帮助你一步步掌握相关知识，让你的坐标轴显示为百分比。

我们需要创建一个基本的HTML结构，用于展示坐标轴，这里以一个简单的div元素为例，我们可以将其作为坐标轴的容器。

Markup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百分比坐标轴</title>
    <style>
        /* 在这里添加CSS样式 */
    </style>
</head>
<body>
    <div id="chart" style="width: 500px; height: 300px;"></div>
    <script>
        // 在这里添加JavaScript代码
    </script>
</body>
</html>

html怎么将坐标轴变成百分比

我们来添加CSS样式，为坐标轴设置基本样式。

CSS

#chart {
    position: relative;
    border: 1px solid #ccc;
}

我们有了坐标轴的容器，下面开始使用JavaScript来绘制坐标轴并转换为百分比。

1、绘制坐标轴：

JavaScript

function drawAxis() {
    var chart = document.getElementById('chart');
    var width = chart.offsetWidth;
    var height = chart.offsetHeight;
    // 创建坐标轴元素
    var svgNS = "http://www.w3.org/2000/svg";
    var svg = document.createElementNS(svgNS, "svg");
    svg.setAttribute('width', width);
    svg.setAttribute('height', height);
    // 绘制x轴
    var xAxis = document.createElementNS(svgNS, "line");
    xAxis.setAttribute('x1', 0);
    xAxis.setAttribute('y1', height - 10);
    xAxis.setAttribute('x2', width);
    xAxis.setAttribute('y2', height - 10);
    xAxis.setAttribute('stroke', 'black');
    xAxis.setAttribute('stroke-width', 2);
    // 绘制y轴
    var yAxis = document.createElementNS(svgNS, "line");
    yAxis.setAttribute('x1', 10);
    yAxis.setAttribute('y1', 0);
    yAxis.setAttribute('x2', 10);
    yAxis.setAttribute('y2', height);
    yAxis.setAttribute('stroke', 'black');
    yAxis.setAttribute('stroke-width', 2);
    svg.appendChild(xAxis);
    svg.appendChild(yAxis);
    chart.appendChild(svg);
}

html怎么将坐标轴变成百分比

2、将坐标轴转换为百分比：

JavaScript

function convertToPercentage() {
    var chart = document.getElementById('chart');
    var svg = chart.querySelector('svg');
    var width = chart.offsetWidth;
    var height = chart.offsetHeight;
    // 计算并添加x轴百分比刻度
    for (var i = 0; i <= 10; i++) {
        var xTick = document.createElementNS("http://www.w3.org/2000/svg", "text");
        xTick.setAttribute('x', i * (width - 20) / 10 + 10);
        xTick.setAttribute('y', height - 5);
        xTick.setAttribute('text-anchor', 'middle');
        xTick.textContent = (i * 10) + '%';
        svg.appendChild(xTick);
    }
    // 计算并添加y轴百分比刻度
    for (var j = 0; j <= 10; j++) {
        var yTick = document.createElementNS("http://www.w3.org/2000/svg", "text");
        yTick.setAttribute('x', 5);
        yTick.setAttribute('y', height - j * (height - 20) / 10 - 10);
        yTick.setAttribute('text-anchor', 'end');
        yTick.textContent = (j * 10) + '%';
        svg.appendChild(yTick);
    }
}
// 初始化函数
function init() {
    drawAxis();
    convertToPercentage();
}
window.onload = init;