javascript - 如何在多次ajax调用后在不同的模态窗口中显示图表？

Question

我进行了多次 ajax 调用，我想在单击交易品种名称后在模态窗口中显示一个图表。现在我只能看到最后一个符号的图表。对于第一个符号，模态窗口是空的。我知道每次调用 ajax 时，新图表函数都会覆盖先前的结果并在最后一个模式窗口中显示新图表。但是我怎样才能在 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();
 }

我的 html:

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

谢谢!

Answer 1

主要问题是您为所有模态框提供了相同的 ID。

以下是修订版。

// 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>

(给演示几秒钟以加载所有内容。之后您可能应该更改您的 API key 。)

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