Highcharts JSON格式 - 拆分和预处理图表数据?

时间:2017-12-11 19:39:55

标签: javascript json api highcharts

我试图从这个JSON获取数据:https://min-api.cryptocompare.com/data/histominute?fsym=BTC&tsym=USD&limit=60&aggregate=3&e=CCCAGG

进入hightcharts。

我有一个正常工作的图表,但我无法获得上述JSON的正确格式:仍在学习javascript。而且我喜欢一点一点地学习项目,至少有一些原因:)

此外,这个时间戳让我烦恼......

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {


var ohlc = [],
    volume = [],
    dataLength = data.length,

    groupingUnits = [[
        'week',                        
        [1]                             
    ], [
        'month',
        [1, 2, 3, 4, 6]
    ]],

    i = 0;

for (i; i < dataLength; i += 1) {
    ohlc.push([
        data[i][0], // the date
        data[i][1], // open
        data[i][2], // high
        data[i][3], // low
        data[i][4] // close
    ]);

    volume.push([
        data[i][0], // the date
        data[i][5] // the volume
    ]);
}


// create the chart
Highcharts.stockChart('container', {

    rangeSelector: {
        selected: 1
    },

    title: {
        text: 'AAPL Historical'
    },

    yAxis: [{
        labels: {
            align: 'right',
            x: -3
        },
        title: {
            text: 'OHLC'
        },
        height: '60%',
        lineWidth: 2,
        resize: {
            enabled: true
        }
    }, {
        labels: {
            align: 'right',
            x: -3
        },
        title: {
            text: 'Volume'
        },
        top: '65%',
        height: '35%',
        offset: 0,
        lineWidth: 2
    }],

    tooltip: {
        split: true
    },

    series: [{
        type: 'candlestick',
        name: 'AAPL',
        data: ohlc,
        dataGrouping: {
            units: groupingUnits
        }
    }, {
        type: 'column',
        name: 'Volume',
        data: volume,
        yAxis: 1,
        dataGrouping: {
            units: groupingUnits
        }
    }]
});
});

有人可以帮忙吗?如何正确地从JSON中分离信息并对其进行格式化,以便高图可以将其可视化?

提前感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

请参阅此实时演示http://jsfiddle.net/kkulig/8qk0mjzp/

来自通过Data获取的对象的

getJSON()属性包含要在图表上绘制的数据。

每个点都有JSON格式(不是你发布的代码中的数组)所以它的属性需要像这样引用:

  for (i; i < dataLength; i += 1) {
    ohlc.push([
      data[i].time * 1000, // the date
      data[i].open, // open
      data[i].high, // high
      data[i].low, // low
      data[i].close // close
    ]);

    volume.push([
      data[i].time * 1000, // the date
      data[i].volumefrom, // low
      data[i].volumeto // high
    ]);
  }