Javascript 在多次ajax调用后，如何在不同的模式窗口中显示图表？

我做了多个ajax调用，我想在点击符号名称后在模式窗口中显示一个图表。现在我只能看到最后一个符号的图表。对于第一个符号，模态窗口为空。我知道，在每次ajax调用中，new chart函数都会覆盖以前的结果，并在最后一个模式窗口中显示新图表。但是，如何在lsat窗口中显示所有以前的图表和新图表

var stocks = [];
window.onload = function() {
var symbols = ['AAPL', 'MSFT', 'FB'];

symbols.forEach( symbol => makeAjaxCall(symbol));
}

function makeAjaxCall(param){
$.ajax({
    type: "GET",
    url: "https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=" + param + "&interval=1min&apikey=T6UEJETEQRVGDJS9",
    success: function(result){
        stocks = result;
        getPrices();
    }
});
}

function getPrices() {
var metaData = stocks["Meta Data"],
    timeSeries = stocks["Time Series (1min)"],
    sym = metaData["2. Symbol"];
var mdl1 =  '<div id="chartModal" class="modal fade" role="dialog">' + 
                '<div class="modal-dialog modal-lg" role="content">' + 
                    '<div class="modal-content">' + 
                        '<div class="modal-header">' + 
                            '<h4>',
mdl2 =                      '</h4>' + 
                            '<button type="button1" class="close" data-dismiss="modal">&times;</button>' + 
                        '</div>' + 
                        '<div class="modal-body" id="modalBody">' +  
                            '<div class = "container-canvas">' + 
                                '<canvas class = "line-chart" width = "400" height = "250"></canvas>' + 
                            '</div>' + 
                        '</div>' + 
                    '</div>' + 
                '</div>' +  
            '</div>',

mdl3 = mdl1 + sym + mdl2;
document.getElementById("loadedStocks").innerHTML += '<div class="eachStock"><span><a onclick="showChart()">' + sym + '</a></span></div><div></div>' + mdl3;
var datasetsValues = Object.values(timeSeries),
    datasetsValuesReverse = datasetsValues.reverse();
    highPrice = Object.values(datasetsValuesReverse).map(o => o["4. close"]),
dateKeys = Object.keys(timeSeries),
    datesReverse = dateKeys.reverse();

var ctx = document.getElementById('loadedStocks').querySelectorAll('.line-chart');
var last = ctx[ctx.length - 1];



new Chart(last, {
    type: 'line',
    data: {
        labels: datesReverse,
        datasets: [{
            data: highPrice,
            borderColor: "#FF4500",
            label: "Close",
            fillset: "#FFDAB9"
        }],
        pointStyle: "cross",
    },
    options: {
        title: {
            display: true,
            text: "Stock's close price changes"
        }
    }
});
}
function showChart() {
    $('#chartModal').modal();
 }

var股票=[]；
window.onload=函数（）{
变量符号=['AAPL'、'MSFT'、'FB']；
symbols.forEach（symbol=>makeAjaxCall（symbol））；
}
函数makeAjaxCall（param）{
$.ajax({
键入：“获取”，
url:“https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=“+param+”&interval=1min&apikey=T6UEJETEQRVGDJS9”，
成功：功能（结果）{
股票=结果；
getPrices（）；
}
});
}
函数getPrices（）{
var元数据=股票[“元数据”]，
时间序列=股票[“时间序列（1min）”]，
sym=元数据[“2.Symbol”]；
变量mdl1=''+
'' + 
'' + 
'' + 
'',
mdl2=''+
“×；”
'' + 
'' +  
'' + 
'' + 
'' + 
'' + 
'' + 
'' +  
'',
mdl3=mdl1+sym+mdl2；
document.getElementById（“loadedStocks”）.innerHTML+=''+sym+''+mdl3；
var datasetsValues=Object.values（timeSeries），
datasetsValuesReverse=datasetsValues.reverse（）；
highPrice=Object.values（datasetsValuesReverse.map）（o=>o[“4.close”]），
dateKeys=Object.keys（timeSeries），
datesReverse=dateKeys.reverse（）；
var ctx=document.getElementById（'loadedStocks'）.querySelectorAll（'.LineChart'）；
var last=ctx[ctx.length-1]；
新图表（上{
键入：“行”，
数据：{
标签：datesReverse，
数据集：[{
数据：高价格，
边框颜色：“FF4500”，
标签：“关闭”，
圆角集：“FFDAB9”
}],
点样式：“交叉”，
},
选项：{
标题：{
显示：对，
文字：“股票收盘价变动”
}
}
});
}
函数显示图（）{
$（'#chartModal'）.modal（）；
}

我的html：

<div id='loadedStocks'></div>

---

谢谢

主要问题是你给所有情态动词都赋予了相同的ID

下面是一个修订

//使用document.ready（）比使用window.load（）更好
//在document.ready（）中封装jQuery相关代码是个好主意
$（函数（）{
//缓存要重复使用的元素是个好主意
var loadedStocks=$（“#loadedStocks”）；
var-API='1〕https://www.alphavantage.co/query';
函数makeAjaxCall（param）{
//简化
$.getJSON（API{
“函数”：“时间序列日内”，
“符号”：参数，
“间隔时间”：“1分钟”，
“apikey”：“T6UEJETEQRVGDJS9”，
}，价格）；
}
函数获取价格（股票）{
var元数据=股票[“元数据”]，
时间序列=股票[“时间序列（1min）”]，
symbol=元数据[“2.symbol”]；
//为每个模式提供唯一的id，例如chartModal AAPL
//在极少数情况下，使用内联样式隐藏HTML
var模态=
'' +
'' +
'' +
'' +
''+符号+''+
“×；”+
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'';
//使用HTML5数据属性存储股票价值（*）
加载股票。追加（“”+模态）；
var datasetsValues=Object.values（timeSeries），
datasetsValuesReverse=datasetsValues.reverse（），
highPrice=Object.values（datasetsValuesReverse.map）（o=>o[“4.close”]），
dateKeys=Object.keys（timeSeries），
datesReverse=dateKeys.reverse（）；
var last=loadedStocks.find（'.linechart'）.last（）[0]；//简化
新图表（上{
键入：“行”，
数据：{
标签：datesReverse，
数据集：[{
数据：高价格，
边框颜色：“FF4500”，
标签：“关闭”，
圆角集：“FFDAB9”
}],
点样式：“交叉”，
},
选项：{
标题：{
显示：对，
文字：“股票收盘价变动”
}
}
});
}
//在动态创建的链接上附加单击处理程序
$（文档）。在（'单击'，'）。每个存储a[数据存储]'，函数显示图（e）{
e、 预防默认值（）；
//基于此链接的库存值（*）查找模式
$（'#chartModal-'+this.dataset.stock.modal（'show'）；
});
//开始！
['AAPL'，'MSFT'，'FB'].forEach（symbol=>makeAjaxCall（symbol））；
});
你好，迈克！非常感谢你！！！过去几天我一直在尝试这样做，但无法显示所有图表。但现在它的工作方式正是我想要的。