Javascript 和 Chart.js 不接受用户输入，假设这是一个可变范围问题

Question

嘿，我只 javascript 了一点点，但我正在尝试获取用户输入，以便它可以将该数字分成 50%、30% 和 20%，这也将显示百分比使用 chart.js 的图表。现在我尝试了很多不同的方法，要么没有图表，没有 div 元素中数字的输出，或者根本没有。我认为它必须处理函数中 perfifty 变量的范围问题，但是 getDocumentById 在它们是全局变量时不会检索它们，我仍然无法让这些变量成为函数的一部分图表。抱歉，如果这是一个简单的修复，我已经处理了太多天了，但我仍然无法弄清楚。谢谢。

function calculate(){
    var user_input = document.getElementById("monthlyincome").value;
    var percentages = {
        perfifty: (50 / 100) * user_input,
        perthirty: (30 / 100) * user_input,
        pertwenty: (20 / 100) * user_input
    };

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


var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            label: '',
            data: [percentages.perfifty, percentages.perthirty, percentages.pertwenty],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

Answer 1

我假设您在用户提供输入时调用 calculate 并且您在任何函数之外创建图表。这意味着您在加载脚本时立即创建图表，此时用户尚未提供任何输入。你想在 calculate 内创建图表，或者如果你想在用户输入之前看到 canvas，你可以 update the chart.

这是一个例子：

function handleInput() {
    let text = document.getElementById("uInput");
    var num = Number(text.value);
    if (isNaN(num)) {
        alert("bad input!");
        return;
    }
  
    var percentages = {
        perfifty: (50 / 100) * num,
        perthirty: (30 / 100) * num,
        pertwenty: (20 / 100) * num
    };
    
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['Red', 'Blue', 'Yellow'],
            datasets: [{
                label: '',
                data: [percentages.perfifty, percentages.perthirty, percentages.pertwenty],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255, 99, 132, 1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
<label for="uInput">Input:</label>
<input type="text" id="uInput">
<button onclick="handleInput()"> Submit </button>

<canvas id="myChart"></canvas>

Javascript 和 Chart.js 不接受用户输入，假设这是一个可变范围问题

Javascript and Chart.js not taking user input assuming it is a variable scope issue

javascript

variables

scope

chart.js