在 Highstock 中加载 JSON 的问题答案

【问题标题】：Issue loading JSON in Highstock在 Highstock 中加载 JSON 的问题
【发布时间】：2015-02-25 16:51:01
【问题描述】：

我已将 Highstock 盘中 Apple 股票价格示例 htm 文件上传到我的服务器：http://54.175.177.142/ef.html

效果很好。这与 Highstock 示例下载中的内容相同，只是我已将 .js 路径更改为托管在 code.highcharts.com 域中的路径，而不是在示例文件夹中。

现在我想做的是将 .json 路径从 highcharts.com 上托管的路径更改：

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

到我自己的服务器：$.getJSON('http://54.175.177.142/appleData.json', function (data) {

从这里我将 JSON 更改为我自己的数据，但作为第一步，我只想重做 highstock 示例。

这就是问题所在，当我对 $.getJSON 调用进行此更改时，我得到一个空白页，我什至没有得到任何 javascript 错误。此实现可见于：http://54.175.177.142/intradayTest.htm

我尝试加载的 JSON 与 the original 几乎相同，除了在我最近尝试使其正常工作时，我已将顶部的“回调”删除为“？”因为这是在示例中将 JSONP 参数添加到链接（&callback=?）时加载的方式。我收集到我不需要 JSONP 方法，因为我将 JSON 托管在我自己的服务器上，与 html 文件相同的域。我还尝试使用领先的“回调”和 JSONP 参数在不同的服务器上准确复制 JSON，但无济于事。

我的 JSON 在这里： http://54.175.177.142/appledata.json

我认为 JSON 本身在某种程度上是错误的。为此，我只是在浏览器中对原始文件进行了“全选”，将其粘贴到 Notepad++ 中并将其保存为 .json。然后我将其 scp'ed 到我的 EC2 上。

对这里发生的事情有什么想法吗？

如果您不想转到链接，这里是 html 代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highstock Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <style type="text/css">
${demo.css}
        </style>
        <script type="text/javascript">
$(function () {
//'http://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?'
//'http://52.0.68.76/appleData.json'
      $.getJSON('http://54.175.177.142/appleData.json', function (data) {

        // create the chart
        $('#container').highcharts('StockChart', {


            title: {
                text: 'AAPL stock price by minute'
            },

            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 : data,
                gapSize: 5,
                tooltip: {
                    valueDecimals: 2
                },
                fillColor : {
                    linearGradient : {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops : [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                threshold: null
            }]
        });
    });
});

        </script>
    </head>
    <body>
<div id="container" style="height: 400px; min-width: 310px"></div>

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
    </body>
</html>

【问题讨论】：

标签： javascript jquery json highstock

【解决方案1】：

好的。我认为这个问题是删除的候选人。我已经解决了我的问题...... 我正在打开 appleData.json...但我将文件作为 appledata.json 上传，即使用小写的“d”。

这两个 json 文件的区别在于我没有意识到 callback();包裹在 JSON 周围的是一个函数。我需要做的就是去掉这个函数并将其保留为：

[
[1317888000000,372.5101,375,372.2,372.52],
 .
 .
 .
[1318607940000,421.94,422,421.8241,422]
]

真是个愚蠢的错误！但这就是菜鸟的方式。

【讨论】：