JSON api时间戳+数据解析

时间:2018-02-17 09:16:47

标签: javascript json api highcharts

我正在使用Highcharts.js制作图表

我正在使用的API与Highchart使用的输出不同。

Highchart将JSON数据读取为[timestamp, data]

看起来像这样:[1512000000000,171.85]

此外,其余数据在同一个调用中进行解析。

现在,我的Api通过一次调用为每个时间戳输出数据(例如,通过网址&ts=1511929853

输出{"ENJ":{"USD":0.02154}}(该时间点的价格)

现在,事情变得复杂了。我需要从特定日期解析价格,直到现在。

我已经为时间戳创建了一个++变量,但是如何在数组输出中包含该时间戳的时间戳和价格。

这有点令人困惑,因为必须多次重复调用以绘制价格的历史图表。一些帮助将不胜感激。如果你需要更多澄清,我就在这里。

通过数据函数

解析数据

这里的完整代码

var startDate = 1511929853;
var endDate = Math.floor((new Date).getTime()/1000); 

  function count() {


      if (startDate != endDate) {
          startDate++
      }
      else {

      return false;
  }
  };
    count();

$.getJSON('https://min-api.cryptocompare.com/data/pricehistorical?fsym=ENJ&tsyms=USD&ts=' + startDate, function (data) {
    // Create the chart
            var enjPrice = `${data.ENJ.USD}`;

    console.log(enjPrice);

    Highcharts.stockChart('container', {

        xAxis: {
            gapGridLineWidth: 0
        },

        rangeSelector: {
            buttons: [{
                type: 'hour',
                count: 1,
                text: '1h'
            }, {
                type: 'day',
                count: 1,
                text: '1D'
            }, {
                type: 'all',
                count: 1,
                text: 'All'
            }],
            selected: 1,
            inputEnabled: false
        },

        series: [{
            name: 'AAPL',
            type: 'area',
            data: JSON.parse("[" + enjPrice + "]"),
            gapSize: 5,
            tooltip: {
                valueDecimals: 2
            }

        }]
    });
});

3 个答案:

答案 0 :(得分:1)

你可以使用扩展运营商,像这样,

let var = [new Date().getTime(), { ...data }.ENJ.USD]

这将导致[1512000000000, 171.85]如您所料。

答案 1 :(得分:0)

您需要为获取数据和生成图表制作不同的功能。下面是一个如何做的例子。



var startDate = 1511929853;
var endDate = Math.floor((new Date).getTime() / 1000);
var data = [];

function count() {
  if (startDate != endDate) {
    data.push(getPrice(startDate));
    startDate++;
  } else {

    generateChart();
  }
};

count();

function getPrice(timestamp) {
  $.getJSON('https://min-api.cryptocompare.com/data/pricehistorical?fsym=ENJ&tsyms=USD&ts=' + startDate, function(data) {
    return [timestamp, data.ENJ.USD];
  });
}

function generateChart() {
  Highcharts.stockChart('container', {

    xAxis: {
      gapGridLineWidth: 0
    },

    rangeSelector: {
      buttons: [{
        type: 'hour',
        count: 1,
        text: '1h'
      }, {
        type: 'day',
        count: 1,
        text: '1D'
      }, {
        type: 'all',
        count: 1,
        text: 'All'
      }],
      selected: 1,
      inputEnabled: false
    },

    series: [{
      name: 'AAPL',
      type: 'area',
      data,
      gapSize: 5,
      tooltip: {
        valueDecimals: 2
      }

    }]
  });
}




虽然这不是你做这件事的最佳方式,但你会有所了解。

答案 2 :(得分:0)

我设法通过使用不同的API来解决问题,该API为过去30天的数据编制索引。我迭代到它们中的每个索引31,并抓住时间和高(价格)值并将它们解析成一个数字,因为我得到一个"字符串"然后将它们循环到一个数组中并将它们放入最终的数据[array]中。正是我需要的图表工作。如果有人需要任何帮助,请随便提出。 :) PS:请原谅console.logs,因为我正在使用它们进行调试和测试,这对我有很大的帮助,你可以删除它们,我将会这样做

 $.getJSON('https://min-api.cryptocompare.com/data/histoday?fsym=ENJ&tsym=USD', function(data) {

      var x = `${data.Data[0].time}`;
      var y = `${data.Data[0].high}`;
      console.log(x);
   console.log(y);
   var tempData = [];
  console.log(tempData);

  for (var i = 0; i < 31; i++ ) {
  var a = `${data.Data[i].time}`;
  var b = `${data.Data[i].high}`;
  function numberfy(val){

    parseFloat(val);
  }
     a = parseFloat(a);
     a = a * 1000;
     b = parseFloat(b);

     x = [a , b];
     tempData.push(x);

  };

  data = tempData;
  console.log(data.length);




    Highcharts.stockChart('container', {