如何用PHP/JS基于用户输入生成坐标系四点可视化？

Hey there! Let's break down how you can plot those four points on a coordinate system based on user input—whether you want a frontend-only JavaScript solution or a PHP-backed approach. I'll assume your four parameters (like 14, 4, 5, 20) correspond to scores across 4 test dimensions, with each point mapped as (dimension index, score) (adjust the coordinate logic if your use case is different!).

This is the simplest approach for visualization, since you don't need server-side processing unless you're storing results. I'll cover two options: using a chart library (for quick setup) and raw Canvas (for full control).

Option 1: Use Chart.js (Quick & Clean) #

Chart.js handles most of the coordinate system heavy lifting for you.

<!-- Add a canvas element to your page -->
<canvas id="resultChart" width="400" height="300"></canvas>

<script>
// Replace with your actual user input values passed from JS
const userScores = [14, 4, 5, 20];
// German labels for your test dimensions (customize these!)
const dimensionLabels = ['Dimension 1', 'Dimension 2', 'Dimension 3', 'Dimension 4'];

// Initialize the scatter plot
const ctx = document.getElementById('resultChart').getContext('2d');
new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: [{
            label: 'Test-Ergebnisse',
            data: userScores.map((score, idx) => ({
                x: idx + 1, // X-axis = dimension number (1-4)
                y: score    // Y-axis = user's score for that dimension
            })),
            backgroundColor: '#2ecc71',
            pointRadius: 8,
            pointHoverRadius: 10
        }]
    },
    options: {
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Test-Dimensionen'
                },
                ticks: {
                    stepSize: 1,
                    // Replace numeric X-ticks with your German labels
                    callback: (value) => dimensionLabels[value - 1]
                }
            },
            y: {
                title: {
                    display: true,
                    text: 'Punkte'
                },
                beginAtZero: true,
                max: Math.max(...userScores) + 5 // Add padding above the highest score
            }
        },
        plugins: {
            legend: { display: false } // Hide legend if not needed
        }
    }
});
</script>

Option 2: Raw Canvas (Full Customization) #

If you don't want to use third-party libraries, use HTML5 Canvas to build the coordinate system from scratch:

<canvas id="coordinateCanvas" width="400" height="300"></canvas>

<script>
const canvas = document.getElementById('coordinateCanvas');
const ctx = canvas.getContext('2d');

// User input points (map your parameters here)
const points = [
    { x: 1, y: 14 },
    { x: 2, y: 4 },
    { x: 3, y: 5 },
    { x: 4, y: 20 }
];

// Coordinate system settings
const padding = 40;
const chartWidth = canvas.width - 2 * padding;
const chartHeight = canvas.height - 2 * padding;

// Calculate scaling factors to fit points on canvas
const maxX = Math.max(...points.map(p => p.x));
const maxY = Math.max(...points.map(p => p.y)) + 5;
const xScale = chartWidth / maxX;
const yScale = chartHeight / maxY;

// Draw axes
ctx.beginPath();
// X-axis
ctx.moveTo(padding, canvas.height - padding);
ctx.lineTo(canvas.width - padding, canvas.height - padding);
// Y-axis
ctx.moveTo(padding, padding);
ctx.lineTo(padding, canvas.height - padding);
ctx.strokeStyle = '#333';
ctx.stroke();

// Draw X-axis ticks & German labels
points.forEach((point, idx) => {
    const xPos = padding + point.x * xScale;
    ctx.beginPath();
    ctx.moveTo(xPos, canvas.height - padding);
    ctx.lineTo(xPos, canvas.height - padding + 5);
    ctx.stroke();
    ctx.fillText(`Dimension ${idx+1}`, xPos - 18, canvas.height - padding + 20);
});

// Draw Y-axis ticks
for (let i = 0; i <= maxY; i += 5) {
    const yPos = canvas.height - padding - i * yScale;
    ctx.beginPath();
    ctx.moveTo(padding - 5, yPos);
    ctx.lineTo(padding, yPos);
    ctx.stroke();
    ctx.fillText(i.toString(), padding - 25, yPos + 5);
}

// Draw the four points
ctx.fillStyle = '#2ecc71';
points.forEach(point => {
    const drawX = padding + point.x * xScale;
    const drawY = canvas.height - padding - point.y * yScale;
    ctx.beginPath();
    ctx.arc(drawX, drawY, 6, 0, Math.PI * 2);
    ctx.fill();
});
</script>

If you need to process parameters server-side (e.g., store results before visualizing), here's how to pass data from PHP to JS:

Step 1: PHP Backend (result.php) #

Handles incoming parameters and passes them to the frontend:

<?php
// Retrieve parameters from POST request (sent by JS)
$param1 = isset($_POST['param1']) ? intval($_POST['param1']) : 0;
$param2 = isset($_POST['param2']) ? intval($_POST['param2']) : 0;
$param3 = isset($_POST['param3']) ? intval($_POST['param3']) : 0;
$param4 = isset($_POST['param4']) ? intval($_POST['param4']) : 0;

// Format data into point objects
$pointsData = [
    ['x' => 1, 'y' => $param1],
    ['x' => 2, 'y' => $param2],
    ['x' => 3, 'y' => $param3],
    ['x' => 4, 'y' => $param4]
];

// If it's an AJAX request, return JSON
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
    header('Content-Type: application/json');
    echo json_encode($pointsData);
    exit;
}

// If loading the page directly, embed data into JS
?>
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Test-Ergebnisse</title>
</head>
<body>
    <canvas id="resultChart" width="400" height="300"></canvas>
    <script>
        // Get points from PHP
        const points = <?php echo json_encode($pointsData); ?>;
        
        // Use the raw Canvas code from the frontend section here to draw the chart
        const canvas = document.getElementById('resultChart');
        const ctx = canvas.getContext('2d');
        
        // ... (copy the Canvas drawing logic from Option 2 above)
    </script>
</body>
</html>

Step 2: JS to Send Parameters to PHP #

Send your user input values to result.php via AJAX:

// Your user input parameters
const userParams = [14, 4, 5, 20];

// Send POST request to PHP
fetch('result.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `param1=${userParams[0]}&param2=${userParams[1]}&param3=${userParams[2]}&param4=${userParams[3]}`
})
.then(response => response.json())
.then(points => {
    // Use the points data to draw your chart (use Chart.js or Canvas code here)
    console.log('Received points from server:', points);
})
.catch(error => console.error('Request error:', error));

内容的提问来源于stack exchange，提问作者John