Javascript 尝试使2个绘图仪独立工作-不使用全局变量

这里是新手

我正在使用plotly创建图形，目前有2个图形，但是我的变量当前是全局变量，并且相互影响图形

我怎样才能最好地压缩变量，使其仅在本地可访问到它所属的图形

绘图仪使用变量数据、布局和配置。但每个图形的这些值都不同

这是两个独立的图表，收入饼图和固定成本饼图：

/* INCOME PIE CHART */
var data = [{
  values: [],
  labels: ['Salary', 'Bonuses', 'Gigs'],
  type: 'pie'
}];

var layout = {
    title: "Please enter data<br>above to graph",
    font: {size: 12},
    paper_bgcolor:"#ade7ba"
};

var config = {responsive: true}

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

function incomePieChart() {
    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 USE THIS TO WRITE PERCENTAGES $("input#netSalaryPER").val(netSalaryPER); */
    layout.title = 'Income Overview';
    Plotly.newPlot('incomePieChart', data, layout, config );
}

/*FIXED COSTS PIE CHART*/
var data = [{
  values: [],
  labels: ["Home", "Transport", "Insurance", "Subscriptions", "Credit Card Payments"],
  type: "pie"
}];

var layout = {
    title: "Please enter data<br>above to graph",
    font: {size: 12},
    paper_bgcolor:"#ade7ba"
};


var config = {responsive: true}

Plotly.newPlot("fixedCostsPieChart", data, layout, config );

function fixedCostsPieChart() {
    var totalHomeCostValuePER =
        Number($("input#totalHomeCostValue").val()) / 
        Number($("input#totalFixedCostsValue").val()) 
        * 100;
    var totalTransportCostValuePER =
        Number($("input#totalTransportCostValue").val()) / 
        Number($("input#totalFixedCostsValue").val()) 
        * 100;
    var totalInsuranceCostValuePER =
        Number($("input#totalInsuranceCostValue").val()) / 
        Number($("input#totalFixedCostsValue").val()) 
        * 100;
    var totalSubscriptionCostValuePER =
        Number($("input#totalSubscriptionCostValue").val()) / 
        Number($("input#totalFixedCostsValue").val()) 
        * 100;
    var totalCreditcardCostValuePER =
        Number($("input#totalCreditcardCostValue").val()) / 
        Number($("input#totalFixedCostsValue").val()) 
        * 100;
    data[0].values[0] = totalHomeCostValuePER;
    data[0].values[1] = totalTransportCostValuePER;
    data[0].values[2] = totalInsuranceCostValuePER;
    data[0].values[3] = totalSubscriptionCostValuePER;
    data[0].values[4] = totalCreditcardCostValuePER;
    layout.title = "Fixed Costs";
    Plotly.newPlot("fixedCostsPieChart", data, layout, config );
}

/*收入饼图*/
风险值数据=[{
值：[]，
标签：[“工资”、“奖金”、“演出”]，
键入：“馅饼”
}];
变量布局={
标题：“请在上图中输入数据”
，
字体：{size:12}，
纸张颜色：“ade7ba”
};
var config={responsive:true}
Plotly.newPlot（'incomePieChart'，数据，布局，配置）；
函数incomePieChart（）{
变量netSalaryPER=
数字（$（“input#netSalary”）.val（））/
数字（$（“输入#totalIncomeValue”）.val（）
* 100;
博努萨莱珀变种=
数字（$（“输入#bonusSalary”）.val（））/
数字（$（“输入#totalIncomeValue”）.val（）
* 100;
var gigSalaryPER=
数字（$（“输入#gigSalary”）.val（））/
数字（$（“输入#totalIncomeValue”）.val（）
* 100;
数据[0]。值[0]=netSalaryPER；
数据[0]。值[1]=bonusSalaryPER
数据[0]。值[2]=gigSalaryPER
/*出于测试目的，使用它来写入百分比$（“input#netSalaryPER”）.val（netSalaryPER）*/
layout.title=‘收入概览’；
Plotly.newPlot（'incomePieChart'，数据，布局，配置）；
}
/*固定成本饼图*/
风险值数据=[{
值：[]，
标签：[“住宅”、“交通”、“保险”、“订阅”、“信用卡付款”]，
类型：“馅饼”
}];
变量布局={
标题：“请在上图中输入数据”
，
字体：{size:12}，
纸张颜色：“ade7ba”
};
var config={responsive:true}
Plotly.newPlot（“固定成本图表”、数据、布局、配置）；
函数fixedCostsPieChart（）{
var totalHomeCostValuePER=
数字（$（“输入#totalHomeCostValue”）.val（））/
数字（$（“输入#总固定成本值”）.val（）
* 100;
var totalTransportCostValuePER=
数字（$（“输入#totalTransportCostValue”）.val（））/
数字（$（“输入#总固定成本值”）.val（）
* 100;
var totalInsuranceCostValuePER=
数字（$（“输入#totalInsuranceCostValue”）.val（））/
数字（$（“输入#总固定成本值”）.val（）
* 100;
var totalSubscriptionCostValuePER=
数字（$（“输入#totalSubscriptionCostValue”）.val（））/
数字（$（“输入#总固定成本值”）.val（）
* 100;
var totalCreditcardCostValuePER=
数字（$（“输入#totalCreditcardCostValue”）.val（））/
数字（$（“输入#总固定成本值”）.val（）
* 100;
数据[0]。值[0]=totalHomeCostValuePER；
数据[0]。值[1]=totalTransportCostValuePER；
数据[0]。值[2]=totalInsuranceCostValuePER；
数据[0]。值[3]=totalSubscriptionCostValuePER；
数据[0]。值[4]=totalCreditcardCostValuePER；
layout.title=“固定成本”；
Plotly.newPlot（“固定成本图表”、数据、布局、配置）；
}

将你想隐藏的变量封装在一个函数中。我就是这么想的，刚才我很难让第二个incomePieChart正常工作。。。如何从第二个函数访问第一个函数中的数据？如果需要共享数据，请将其从两个函数中取出，并将其作为参数提供给它们。