基于 Quandl 数据的 Highcharts 股票图表 API

Question

我想使用 HighCharts.com 的 "Highstock" 图表工具，根据 Quandl API 的价格数据创建股票图表。

通过使用 Quandl 的 API，我可以获得每个交易日股票的价格信息。例如，以下 URL 会以 Json 格式向我提供从 2015 年 1 月 3 日到 2015 年 2 月 3 日的每一天的微软股价。

Quandl.com Json link

问题是这个 Json 格式不符合 Highstock 期望的格式。 Highstock 期望的格式如下所示：

Highcharts Json link

所以问题是我可以将 Quandl 的 Json 输出转换为对应于 Highstock 期望的 Json 格式吗？或者我可以修改 Highstock 代码以接受 Quandl Json 格式吗？

Answer 1

JavaScript 中的转换非常简单：

  var hiJson = quandlJson.dataset.data.map(function(d){
    return [new Date(d[0]).getTime(), d[4]];
  });

这将 return 由 date in milliseconds 和 close price 组成的数组。

完整示例：

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="highstock@0.0.1" data-semver="0.0.1" src="http://code.highcharts.com/stock/highstock.js"></script>
  <script data-require="highstock@0.0.1" 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="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="highstock@0.0.1" data-semver="0.0.1" src="http://code.highcharts.com/stock/highstock.js"></script>
  <script data-require="highstock@0.0.1" 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>

Answer 2

.getTime() 方法不适用于字符串。相反，您应该使用 Date.parse()。

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="highstock@0.0.1" data-semver="0.0.1" src="http://code.highcharts.com/stock/highstock.js"></script>
  <script data-require="highstock@0.0.1" 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>

基于 Quandl 数据的 Highcharts 股票图表 API

Highcharts stock chart based on data from Quandl API

json

highcharts

highstock