Wie können Diagramme nach mehreren Ajax-Aufrufen in verschiedenen modalen Fenstern angezeigt werden?

Question

Ich mache mehrere Ajax-Aufrufe und ich möchte ein Diagramm im modalen Fenster zeigen, nachdem ich auf den Symbolnamen geklickt habe. Im Moment kann ich das Diagramm nur für das letzte Symbol sehen. Für das erste Symbol ist das modale Fenster leer. Ich verstehe, dass bei jedem Ajax-Aufruf die neue Diagrammfunktion das vorherige Ergebnis überschreibt und ein neues Diagramm im letzten modalen Fenster anzeigt. Aber wie kann ich noch alle vorherigen Diagramme anzeigen und neue im lsat-Fenster anzeigen?

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(); 
} 

Mein html:

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

Dank!

Answer 1

Das Hauptproblem ist, dass du all deinen Mods die gleiche ID gegeben hast.

Unten ist eine Revision.

// better to use document.ready() than window.load() 
 
// good idea to wrap jQuery-related code within document.ready() 
 
$(function() { 
 
    // good idea to cache elements that you will re-use 
 
    var loadedStocks = $("#loadedStocks"); 
 
    var API = 'https://www.alphavantage.co/query'; 
 

 
    function makeAjaxCall(param) { 
 
    // simplified 
 
    $.getJSON(API, { 
 
     'function': 'TIME_SERIES_INTRADAY', 
 
     'symbol': param, 
 
     'interval': '1min', 
 
     'apikey': 'T6UEJETEQRVGDJS9', 
 
    }, getPrices); 
 
    } 
 

 
    function getPrices(stocks) { 
 
    var metaData = stocks["Meta Data"], 
 
     timeSeries = stocks["Time Series (1min)"], 
 
     symbol = metaData["2. Symbol"]; 
 

 
    // give a unique id to each modal e.g. chartModal-AAPL 
 
    // in rare cases, use inline style to hide your HTML 
 
    var modal = 
 
     '<div id="chartModal-' + symbol + '" class="modal fade" role="dialog" style="display:none">' + 
 
     '<div class="modal-dialog modal-lg" role="content">' + 
 
     '<div class="modal-content">' + 
 
     '<div class="modal-header">' + 
 
     '<h4>' + symbol + '</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>'; 
 

 
    // use HTML5-data attribute to store the stock value (*) 
 
    loadedStocks.append('<div class="eachStock"><a href="#" data-stock="' + symbol + '">' + symbol + '</a></div>' + modal); 
 

 
    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('.line-chart').last()[0]; // simplified 
 

 
    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" 
 
     } 
 
     } 
 
    }); 
 
    } 
 

 
    // attach a click handler on the dynamically-created link 
 
    $(document).on('click', '.eachStock a[data-stock]', function showChart(e) { 
 
    e.preventDefault(); 
 
    // find modal based on this link's stock value (*) 
 
    $('#chartModal-' + this.dataset.stock).modal('show'); 
 
    }); 
 

 
    // start! 
 
    ['AAPL', 'MSFT', 'FB'].forEach(symbol => makeAjaxCall(symbol)); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> 
 

 
<div id="loadedStocks"></div>

(Geben Sie die Demo ein paar Sekunden alles zu laden. Sie sollten wahrscheinlich danach Ihren API-Schlüssel ändern.)

• window.onload vs document.ready
• jQuery shorthand methods
• Event propogation
• Data attributes