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。

以下是修订版。

＆＃13;

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

＆＃13;

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

＆＃13;

（给演示几秒钟加载所有内容。之后你应该更改你的API密钥。）

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

1 个答案: