Javascript 从输入中获取值并将其转换为百分比值，以便在绘图仪饼图中使用

我正在创建一个预算计算器，并希望将用户输入转换为饼图。一旦我了解了如何做到这一点，我就可以为其他部分创建图表

为了测试的目的，让我们来看看用户输入的收入：

Bank Account, 
Savings Account, 
Cash-on-Hand
= TOTAL CURRENT ACCOUNTS

因此，我有3个输入字段，它们已经加在了总的经常账户上

现在我想得到以下百分比并绘制它们：

Bank Account / Total Current Accounts * 100 = var
Savings Account / Total Current Accounts * 100 = var
Cash-on-Hand / Total Current Accounts * 100 = var

下面是我将使用的基本绘图饼图代码，HTML：

<div id="incomePieChart"><!-- Plotly chart will be drawn inside this DIV --></div>

所以我有两件事要做

首先，我需要从DOM中读取值，不确定是否应该使用HTML/DOM方法：

var accountBankValuePer = document.getElementById("accountBankValue").value;
var totalAccountsValuePer = document.getElementById("totalAccountsValue").value;
var A = (Math.floor((accountBankValuePer / totalAccountsValuePer) * 100));

或jQuery方法来创建Javascript对象：

var accountBankValuePer = $("accountBankValue").value;
var totalAccountsValuePer = $("totalAccountsValue").value;
Var A = (Math.floor((accountBankValuePer / totalAccountsValuePer) * 100));

一旦我有了A的值，我该如何把它插入到图表中。这行吗

var data = [{
  values: [A, B, C],
  labels: ['Bank Account', 'Savings Account', 'Cash-on-Hand'],
  type: 'pie'
}];

var layout = {
  height: 400,
  width: 500
};

Plotly.newPlot('incomePieChart', data, layout);

任何帮助都将不胜感激

在接下来的几个小时里，我将尝试保持gitpod预览运行，单击下方侧栏中的净值概览，以获取我正在使用的字段：

请参见屏幕截图以获取参考：

---

谢谢！：）

在我的课程导师的支持下，我已经能够回答这个问题了

将此信息写入图表也有效，我需要清空数组，因为在名为数据的数组中，plotly使用名为值的数组，所以我可以将该数组作为目标，并用我的输出填充它

该函数还需要在变量之后调用，否则该函数将无法工作：

var data = [{
  values: [],
  labels: ['Bank Accounts', 'Savings Accounts', 'Cash-on-Hand'],
  type: 'pie'
}];

var layout = {
  height: 400,
  width: 500
};

function testPER() {
    var netSalaryPER =
        Number($("input#netSalary").val()) / 
        Number($("input#totalIncomeValue").val()) 
        * 100;
    var bonusSalaryPER =
        Number($("input#bonusSalary").val()) / 
        Number($("input#totalIncomeValue").val()) 
        * 100;
    var gigSalaryPER =
        Number($("input#gigSalary").val()) / 
        Number($("input#totalIncomeValue").val()) 
        * 100;
    data[0].values[0] = netSalaryPER;
    data[0].values[1] = bonusSalaryPER
    data[0].values[2] = gigSalaryPER
    /* TESTING PURPOSES $("input#netSalaryPER").val(netSalaryPER); */
    Plotly.newPlot('incomePieChart', data, layout);
}

var data = [{
  values: [],
  labels: ['Bank Accounts', 'Savings Accounts', 'Cash-on-Hand'],
  type: 'pie'
}];

var layout = {
  height: 400,
  width: 500
};

function testPER() {
    var netSalaryPER =
        Number($("input#netSalary").val()) / 
        Number($("input#totalIncomeValue").val()) 
        * 100;
    var bonusSalaryPER =
        Number($("input#bonusSalary").val()) / 
        Number($("input#totalIncomeValue").val()) 
        * 100;
    var gigSalaryPER =
        Number($("input#gigSalary").val()) / 
        Number($("input#totalIncomeValue").val()) 
        * 100;
    data[0].values[0] = netSalaryPER;
    data[0].values[1] = bonusSalaryPER
    data[0].values[2] = gigSalaryPER
    /* TESTING PURPOSES $("input#netSalaryPER").val(netSalaryPER); */
    Plotly.newPlot('incomePieChart', data, layout);
}