JavaScript与Chart.js无法获取用户输入 疑似变量作用域问题

核心错误原因 #

• 作用域问题：percentages是calculate函数内部的局部变量，全局执行的图表初始化代码无法访问该变量，直接调用会抛出未定义错误
• 执行时序错误：图表初始化在页面加载时就会执行，此时用户未输入数值、也未触发calculate计算，没有可用的占比数据传入图表
• 缺少类型转换：从input元素获取的user_input是字符串类型，未转数字直接做乘法运算可能出现异常结果
• 方法拼写错误：你提到的getDocumentById是拼写错误，正确API为getElementById
• 冗余配置：饼图不需要配置Y轴刻度，现有scales配置对饼图无效可以直接删除

修正后的代码 #

// 先声明全局图表实例
let myChart;

function calculate(){
    // 把用户输入转成数字
    const user_input = Number(document.getElementById("monthlyincome").value);
    // 输入合法性校验，避免非数字输入报错
    if(isNaN(user_input) || user_input <= 0) {
        alert("请输入合法的正数值");
        return;
    }
    const percentages = {
        perfifty: 0.5 * user_input,
        perthirty: 0.3 * user_input,
        pertwenty: 0.2 * user_input
    };

    document.getElementById("50%").innerHTML = percentages.perfifty;
    document.getElementById("30%").innerHTML = percentages.perthirty;
    document.getElementById("20%").innerHTML = percentages.pertwenty;

    // 计算完成后更新图表数据并刷新
    if(myChart) {
        myChart.data.datasets[0].data = [percentages.perfifty, percentages.perthirty, percentages.pertwenty];
        myChart.update();
    }
};

// 页面加载完成后初始化图表，初始默认值为0
window.onload = function() {
    const ctx = document.getElementById('myChart').getContext('2d');
    myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['50%占比', '30%占比', '20%占比'],
            datasets: [{
                label: '金额分布',
                data: [0, 0, 0],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)'
                ],
                borderWidth: 1
            }]
        }
    });
}

额外使用说明 #

• 给页面上的输入确认按钮绑定点击事件，触发calculate函数即可完成计算和图表刷新
• 要确保Chart.js库在你的业务代码之前加载完成，否则会报Chart is not defined错误

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