Question

我是HIGHCHARTS的初学者。

我想从这个例子开始： http://people.canonical.com/~bradf/media/highstock/examples/basic-line/index.htm

我下载了相应的JSON文件：

http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json

我想在本地运行它（并在用我自己的JSON文件测试之后）。但它不起作用！

我使用示例的源代码，我刚刚修改了getJSON行。

我有这个：

$.getJSON('./data/json/'+ name+'-c.json&callback=?', function(data) { ... }

我认为问题来自回调。有什么想法吗？

Answer 1

要使示例在您的本地工作，您必须按照以下步骤操作：

我认为您从网址http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json下载的json源代码存储在文件data.json

现在您已经注意到，文件data.json中的json源如下所示：

?(/* AAPL historical OHLC data from the Google Finance API */
[

/* May 2006 */
[1147651200000,67.79],
[1147737600000,64.98],
[1147824000000,65.26],
[1147910400000,63.18],
.......
....

所以现在您已经注意到json源代码行中有代码行?(/* AAPL historical OHLC data from the Google Finance API */和/* May 2006 */，这些代码行通过生成解析错误导致错误，因为数据源包含此类代码行不是有效的json字符串。

所以你必须从整个json文件中删除每一个这样的无效代码行，以使事情正常工作。

删除所有无效的代码行后，您的json文件应如下所示：

[
[1147651200000,67.79],
[1147737600000,64.98],
[1147824000000,65.26],
....
...
]

3。在此步骤之前，您已准备好使用Highstock图表的有效json数据源，因此最终要显示图表，您必须使用以下代码：

$(function() {
        $.getJSON('data.json', function(data) {

        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container'
            },

            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });

 });

整个页面源代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script>
    $(function() {
        $.getJSON('data.json', function(data) {

        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'container'
            },

            rangeSelector : {
                selected : 1
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });

     });
    </script>
    <body>
        <div id="container" style="height: 500px; min-width: 500px"></div>
    </body>

Answer 2

&callback=?通常附加于jsonp，这是一种用于跨域调用的技术（例如，用于其他网站）。

从我可以看到你应该尝试从通话中删除它。在你的情况下：

$.getJSON('./data/json/'+ name+'-c.json, function(data) { ... }

Highcharts - 无法运行的例子

2 个答案: