时间戳

首页 > 解决方案 > 为什么在两次请求后我的数组未定义？（使用 chart.js 和 stock.js）

javascript - 为什么在两次请求后我的数组未定义？（使用 chart.js 和 stock.js）

问题描述

我正在尝试使用chart.js和stocks.js来绘制股票图表。我为此使用了两个函数。一个在单击按钮时接收，另一个用于清理数据并更新图表。

我尝试过更改图形、更新方式、清理数据的方式以及其他内容。我是 JavaScript 新手。单击 HTML 按钮时，它会激活该oneday功能。我有其他按钮做同样的事情但时间不同等。现在当我按下一个按钮时它可以工作，然后当我按下另一个按钮时它会改变，但是第三个的 x 轴未定义，然后第四个有两个轴都未定义。

function clearwithtimes(){
        async function request(){
            var result = await stocks.timeSeries({
                symbol: stock,
                interval: interval,
                amount: time
             });
             var datesdata = result;
             for (i in datesdata){
                     //Loops through array
                 delete datesdata[i].high
                 delete datesdata[i].low
                 delete datesdata[i].close
                 delete datesdata[i].volume
                 delete datesdata[i].open
             }
             var stringeddates = JSON.stringify(datesdata);
             var step;
             stringeddates = stringeddates.replace('[{"date":"', '');
             for (step = 0; step < time; step++) {
                 stringeddates = stringeddates.replace('T', ' ');
                 stringeddates = stringeddates.replace('.000Z', '');
                 stringeddates = stringeddates.replace('",', '#');
                 stringeddates = stringeddates.replace('"},{"date":"', '#');
             }
             stringeddates = stringeddates.replace('},{"date":"', '#');
             stringeddates = stringeddates.replace('T19:00:00.000Z"}]', '');
             stringeddates = stringeddates.replace('T19:00:00.000Z"', '');
             stringeddates = stringeddates.replace('"}]', '');
             stringeddates = stringeddates.split("#");

             var result = await stocks.timeSeries({
                 symbol: stock,
                 interval: interval,
                 amount: time
                });
            for (i in result){
                    //Loops through array
                delete result[i].high
                delete result[i].low
                delete result[i].close
                delete result[i].volume
                delete result[i].date
             }
         var numberlist = JSON.stringify(result);
         var step;
         numberlist = numberlist.replace('[{"open":', '');
         for (step = 0; step < time; step++) {
         numberlist = numberlist.replace('},{"open":', '#');
     }
         numberlist = numberlist.replace('},{"open":', '#');
         numberlist = numberlist.replace('}]', '');
         numberlist = numberlist.split("#");
         finalprices = numberlist.reverse();
         finaldates = stringeddates.reverse();
         stockGraph.data.datasets[0].data = finalprices;
         stockGraph.data.labels = finaldates;
         stockGraph.update();
        }
        request();
    }
    function oneday() {
        stockform=document.getElementById("stockname");
        stock=stockform.elements["Stock"].value;
        time = 96;
        interval = '15min';
        clearwithtimes();
    }

应该发生的是，当我多次激活一天功能时，轴不应未定义。

标签： javascriptarrayscharts

解决方案

您遇到了速率限制，当发生这种情况时，stocks.js 和 Alpha Vantage 的 API 都不会报告任何错误。当您的轴不稳定时检查 XHR 响应：

{
    “注意”：“感谢您使用 Alpha Vantage！我们的标准 API 调用频率是每分钟 5 次调用和每天 500 次调用。如果您想定位更高的 API 调用频率。”
}

通常，在访问远程 API 时，您应该尝试成为一个好公民，并且不要发出不必要的请求。您的request()函数两次抓取相同的数据，大概是因为您销毁了一些稍后需要的数据。重构函数，你只需要点击一次 API：

function clearwithtimes() {
  async function request() {
    const result = await stocks.timeSeries({
      symbol: stock,
      interval: interval,
      amount: time
    });

    if (result.length === 0) {
      console.log('Something went wrong!');
      return;
    }

    const finaldates = result.map(series =>
      series.date      // get the date from each series,
        .toISOString() // convert it to a string, e.g. "2019-05-11T10:10:23.323Z",
        .split('T')[0] // split it in two at the "T", and return the first half
    ).reverse();
    const finalprices = result.map(series => series.open).reverse();

    stockGraph.data.datasets[0].data = finalprices;
    stockGraph.data.labels = finaldates;
    stockGraph.update();
  }
  request();
}

stocks.timeSeries()可以告诉您已达到限制的唯一方法是返回一个空数组。在更新图表之前检查一下。

result.map()根据数组返回一个新数组result，而不修改它。尝试使用原始 JSON 字符串要好得多。

理想情况下，您应该尽可能缓存 的值result并根据该缓存值更新图表。

推荐阅读