从输入中获取价值并将其转换为百分比值，以用于绘图饼图中

问题描述

我正在创建一个预算计算器，并希望将用户输入转换为饼图。了解了操作方法后，即可为其他部分创建图形。

出于测试目的，让我们看一下用户输入的收入：

ring.translatesAutoresizingMaskIntoConstraints = false

所以我有3个输入字段，这些字段已经加到“当前帐户总数”中。

现在我想获得以下百分比并将其绘制出来：

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

这是我将要使用的基本的饼图饼图代码，HTML：

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

基本图表JavaScript：

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

所以我想实现两件事。

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

var data = [{
  values: [50,40,10],/* THIS IS WHERE THE VAR %'s SHOULD BE */
  labels: ['Bank Account','Savings Account','Cash-on-Hand'],type: 'pie'
}];

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

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

或jQuery方法创建Javascript对象：

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

然后有了A的值后，如何将其插入图表中。这行得通吗？：

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

任何帮助将不胜感激！

我将尝试在接下来的几个小时内保持gitpod预览的运行，单击下方侧边栏中的Net Worth Overview，以获取我正在使用的字段：https://8000-abfef542-7b26-46e9-b8f8-6fc9a35d5d77.ws-eu01.gitpod.io/

请参阅屏幕截图以供参考：Fields to be used for Plotly calculation

谢谢！ ：）

解决方法

我在课程中得到了老师的支持，就能回答这个问题。

将此信息写入图表也可行，我需要清空该数组，并且由于在一个名为 data 的数组中使用了一个名为 values 的数组，因此我可以将数组并用我的输出填充它。

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

server.py