В цикле, проходящем через массив, но не функцию JS

Question

Я использую Plotly.js для рендеринга некоторых биржевых данных. Я хочу иметь в общей сложности 5 графиков без повторения. Поэтому я создал массив, содержащий пару ключей и значений для каждой ссылки, для которой я собираюсь выполнить вызов.

var links = {
  'microsoft':'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=MSFT&apikey=APIKEY&datatype=csv',
  'apple': 'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=MSFT&apikey=APIKEY&datatype=csv',
  'tesla':'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=MSFT&apikey=APIKEY&datatype=csv',
  'amazon':'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=MSFT&apikey=APIKEY&datatype=csv',
  'facebook':'https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=MSFT&apikey=APIKEY&datatype=csv'
};

Оттуда я использую цикл for для циклического перебора каждой пары значений ключа с моим сюжетная функция между ними.

for (var key in links) {
  //url of the data I am passing
  Plotly.d3.csv(links[key], function(err, rows){

  function unpack(rows, key) {
    return rows.map(function(row) {
      return row[key];
    });
  }

  var trace = {
    x: unpack(rows, 'timestamp'),
    close: unpack(rows, 'open'),
    high: unpack(rows, 'high'),
    low: unpack(rows, 'low'),
    open: unpack(rows, 'close'),

    // cutomise colors
    increasing: {line: {color: 'black'}},
    decreasing: {line: {color: 'red'}},

    type: 'candlestick',
    xaxis: 'x',
    yaxis: 'y'
  };

  var data = [trace];

  var layout = {
    dragmode: 'zoom',
    showlegend: false,
    xaxis: {
      rangeslider: {
         visible: false
     }
    }
  };
  //this key is the value of the id of the html element
  Plotly.plot(key, data, layout);
  });;
}

Эта функция работает нормально, но печатает только первую пару в DOM. Я хочу все 5. Я не уверен, что я делаю неправильно.

UPDATE:

Вот элементы HTML, в которые я пытаюсь отобразить эти элементы.

<div class="container-fluid" id="home__page">
      <div class="row ">
        <div class="col-6">
          <div id="microsoft">

          </div>
        </div>
      </div>
      <div class="row ">
        <div class="col">
          <div id="apple">

          </div>
        </div>
      </div>
      <div class="row ">
        <div class="col">
          <div id="tesla">

          </div>
        </div>
      </div>
      <div class="row ">
        <div class="col">
          <div id="amazon">

          </div>
        </div>
      </div>
      <div class="row ">
        <div class="col">
          <div id="facebook">

          </div>
        </div>
      </div>
    </div>

Answer 1

Я никогда раньше не использовал плоттер, подозреваю, что 2 вещи: либо фиксированный идентификатор / контейнер задан и переопределен, либо ключ постоянно переопределен. Вы попробуете это, иначе я удалю ответ:

for (var key in links) {
  (function(key,links){
//url of the data I am passing
  Plotly.d3.csv(links[key], function(err, rows){

  function unpack(rows, key) {
    return rows.map(function(row) {
      return row[key];
    });
  }

  var trace = {
    x: unpack(rows, 'timestamp'),
    close: unpack(rows, 'open'),
    high: unpack(rows, 'high'),
    low: unpack(rows, 'low'),
    open: unpack(rows, 'close'),

    // cutomise colors
    increasing: {line: {color: 'black'}},
    decreasing: {line: {color: 'red'}},

    type: 'candlestick',
    xaxis: 'x',
    yaxis: 'y'
  };

  var data = [trace];

  var layout = {
    dragmode: 'zoom',
    showlegend: false,
    xaxis: {
      rangeslider: {
         visible: false
     }
    }
  };
  //this key is the value of the id of the html element
  Plotly.plot(key, data, layout);
  });;
  })(key,links)
}