用于循环遍历数组而不是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 in循环在每个键值对之间循环，并在两者之间使用我的plotly函数。

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.我不确定我在做什么错。

更新：

这是我尝试将这些项目渲染到的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

我以前从未使用过，我怀疑有两件事，要么给出并覆盖了一个固定的id /容器，要么不断地重新确定密钥。 您可以尝试一下吗，否则我将删除答案：

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