我想使用HighCharts.com的“Highstock”制图工具根据Quandl API的价格数据创建股票图表。Highcharts股票图表基于Quandl API的数据API
通过使用Quandl的API，我可以获得每个交易日股票的价格信息。例如，下面的URL会给我微软的股票价格，从2015年1月3日到2015年2月3日，每天都是Json格式。
的问题是，这个JSON格式不对应于Highstock预计格式。该Highstock期望的格式如下：
所以，问题是我能转换从Quandl JSON输出提供对应于Highstock预计JSON格式？或者我可以修改Highstock代码来接受Quandl Json格式吗？
这是一个非常简单的转换在JavaScript：
var hiJson = quandlJson.dataset.data.map(function(d){
return [new Date(d[0]).getTime(), d[4]];
});
这将返回的date in milliseconds和close price数组的数组。
完整的示例：
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="[email protected]" data-semver="0.0.1" src="http://code.highcharts.com/stock/highstock.js"></script>
<script data-require="[email protected]" data-semver="0.0.1" src="http://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var json = {
"dataset": {
"id": 9775138,
"dataset_code": "MSFT",
"database_code": "YAHOO",
"name": "MSFT: Microsoft Corporation -",
"description": "Exchange : . Key Statistics",
"refreshed_at": "2015-10-18T19:49:01.957Z",
"newest_available_date": "2015-10-16",
"oldest_available_date": "1986-03-13",
"column_names": ["Date", "Open", "High", "Low", "Close", "Volume", "Adjusted Close"],
"frequency": "daily",
"type": "Time Series",
"premium": false,
"limit": null,
"transform": null,
"column_index": null,
"start_date": "2015-01-03",
"end_date": "2015-02-03",
"data": [
["2015-01-05", 46.369999, 46.73, 46.25, 46.330002, 39673900.0, 45.406156],
["2015-01-06", 46.380001, 46.75, 45.540001, 45.650002, 36447900.0, 44.739715],
["2015-01-07", 45.98, 46.459999, 45.490002, 46.23, 29114100.0, 45.308148],
["2015-01-08", 46.75, 47.75, 46.720001, 47.59, 29645200.0, 46.641029],
["2015-01-09", 47.610001, 47.82, 46.900002, 47.189999, 23942800.0, 46.249004],
["2015-01-12", 47.419998, 47.540001, 46.360001, 46.599998, 23651900.0, 45.670769],
["2015-01-13", 46.970001, 47.91, 46.060001, 46.360001, 35270600.0, 45.435556],
["2015-01-14", 45.959999, 46.240002, 45.619999, 45.959999, 29719600.0, 45.043531],
["2015-01-15", 46.220001, 46.380001, 45.41, 45.48, 32742300.0, 44.573103],
["2015-01-16", 45.310001, 46.279999, 45.169998, 46.240002, 35695300.0, 45.31795],
["2015-01-20", 46.299999, 46.650002, 45.57, 46.389999, 36161900.0, 45.464957],
["2015-01-21", 45.939999, 46.139999, 45.48, 45.919998, 39081100.0, 45.004328],
["2015-01-22", 46.380001, 47.139999, 46.080002, 47.130001, 35898000.0, 46.190203],
["2015-01-23", 47.360001, 47.389999, 46.799999, 47.18, 26211600.0, 46.239205],
["2015-01-26", 47.0, 47.130001, 46.240002, 47.009998, 42525500.0, 46.072593],
["2015-01-27", 42.950001, 43.200001, 42.110001, 42.66, 169164000.0, 41.809336],
["2015-01-28", 42.740002, 42.790001, 41.16, 41.189999, 84507100.0, 40.368647],
["2015-01-29", 40.93, 42.119999, 40.790001, 42.009998, 63585300.0, 41.172296],
["2015-01-30", 41.549999, 41.580002, 40.349998, 40.400002, 78004900.0, 39.594403],
["2015-02-02", 40.59, 41.369999, 40.23, 41.279999, 50352500.0, 40.456853],
["2015-02-03", 41.630001, 41.93, 41.049999, 41.599998, 52082400.0, 40.770471]
],
"collapse": null,
"order": "asc",
"database_id": 394
}
};
var hiJson = json.dataset.data.map(function(d) {
return [new Date(d[0]).getTime(), d[4]]
});
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'MS Stock Price'
},
series: [{
name: 'MS',
data: hiJson,
tooltip: {
valueDecimals: 2
}
}]
});
</script>
</body>
</html>与AJAX完整的示例：
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="[email protected]" data-semver="0.0.1" src="http://code.highcharts.com/stock/highstock.js"></script>
<script data-require="[email protected]" data-semver="0.0.1" src="http://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<body>
<div id="container"></div>
<script>
$.getJSON('https://www.quandl.com/api/v3/datasets/YAHOO/MSFT.json?start_date=2015-01-03&end_date=2015-02-03&order=asc', function(json) {
var hiJson = json.dataset.data.map(function(d) {
return [new Date(d[0]).getTime(), d[4]]
});
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'MS Stock Price'
},
series: [{
name: 'MS',
data: hiJson,
tooltip: {
valueDecimals: 2
}
}]
});
});
</script>
</body>
</html>.getTime()方法对字符串不起作用。相反，你应该使用Date.parse()。
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="[email protected]" data-semver="0.0.1" src="http://code.highcharts.com/stock/highstock.js"></script>
<script data-require="[email protected]" data-semver="0.0.1" src="http://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<body>
<div id="container"></div>
<script>
$.getJSON('https://www.quandl.com/api/v3/datasets/YAHOO/MSFT.json?start_date=2015-01-03&end_date=2015-02-03&order=asc', function(json) {
var hiJson = json.dataset.data.map(function(d) {
return [Date.parse(d[0]), d[4]]
});
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 1
},
title: {
text: 'MS Stock Price'
},
series: [{
name: 'MS',
data: hiJson,
tooltip: {
valueDecimals: 2
}
}]
});
});
</script>
</body>
</html>
谢谢，我看到:-)我的JavaScript是有点生疏了，所以问题是如何可以将您的例子进行修改，以便在JavaScript中的股票价格数据不是硬编码，但来自[链接] https://www.quandl.com/api/v3/datasets/YAHOO/MSFT.json?start_date=2015-01-03&end_date=2015-02-03&order=asc –
@ThomasJackson，你问题一个ajax请求。查看更新的答案。 – Mark
非常感谢，这正是我一直在寻找的。 –