Chart.js图表生成异常：提交表单后无图表显示且页面刷新

核心问题及修复方案： #

• 表单默认提交导致页面刷新
  按钮位于<form>标签内，默认类型为submit，点击会触发表单提交直接刷新页面。解决方法：给按钮添加type="button"属性，阻止默认提交行为：

  <button type="button" onclick="generateChart()">Generate the selected chart</button>
  

• 重复定义generateChart函数
  代码里存在两个同名的generateChart函数，后面的函数会完全覆盖前面的逻辑，且第二个函数错误引用了不存在的userData输入框（实际应为dataInput）。需删除无效函数，保留并完善正确逻辑。

• 未使用用户输入的标签
  原函数中处理了labelsInput内容，但创建图表时用了自动生成的数字标签，需替换为用户输入的自定义标签数组。

修复后的完整代码： #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
    <div id="header">
        <h1>School Project</h1>
    </div>

    <nav>
        <a href="#" onclick="showChartsPage()">Charts</a>
        <a href="#" onclick="showFormsPage()">Send Forms</a>
    </nav>

    <div id="chartsPage">
        <h2>Chart Display Page</h2>
    </div>

    <form id="dataForm">
        <div>
            <label for="labelsInput">Labels (comma-separated):</label>
            <input type="text" id="labelsInput" placeholder="Label 1, Label 2, Label 3">
        </div>

        <label for="dataInput">Enter Data: </label>
        <input type="text" id="dataInput" required placeholder="10,20,30">

        <label for="chartType">Select Chart Type you want:</label>
        <select id="chartType">
            <option value="bar">Bar Chart</option>
            <option value="pie">Pie Chart</option>
            <option value="radar">Radar Chart</option>
            <option value="line">Line Chart</option>
        </select>

        <button type="button" onclick="generateChart()">Generate the selected chart</button>
        <div><canvas id="myChart"></canvas></div>
    </form>

    <div id="formsPage" class="card" style="display: none;">
        <h2>Send Google Forms</h2>
        <img src="Project/download.png" alt="Picture of a Form">
        <p>Send Created Google Forms here</p>
        <button onclick="sendGoogleForm()">Send Google Form</button>
    </div>

    <script>
        function showChartsPage() {
            document.getElementById('chartsPage').style.display = 'block';
            document.getElementById('formsPage').style.display = 'none';
        }

        function showFormsPage() {
            document.getElementById('chartsPage').style.display = 'none';
            document.getElementById('formsPage').style.display = 'block';
        }

        function generateChart() {
            const dataInput = document.getElementById("dataInput").value;
            const labelsInput = document.getElementById('labelsInput').value;
            const chartType = document.getElementById('chartType').value;

            const data = dataInput.split(',').map(value => {
                const num = parseFloat(value.trim());
                return isNaN(num) ? 0 : num;
            });
            const labels = labelsInput.split(',').map(label => label.trim());

            const finalLabels = labels.length > 0 ? labels : Array.from({length: data.length}, (_, i) => i + 1);

            const ctx = document.getElementById('myChart').getContext('2d');

            if (window.myChart) {
                window.myChart.destroy();
            }

            window.myChart = new Chart(ctx, {
                type: chartType,
                data: {
                    labels: finalLabels,
                    datasets: [{
                        label: 'User Data',
                        data: data,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        function sendGoogleForm() {
            alert("Google Form sent!");
        }
    </script>
</body>

</html>

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