gpt4 book ai didi

javascript - Highcharts - 无法运行示例

转载 作者:行者123 更新时间:2023-11-30 12:39:42 25 4
gpt4 key购买 nike

我是 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) { ... }

我认为问题出在回调上。有什么想法吗?

最佳答案

要使示例在本地运行,您必须执行以下步骤:

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

  2. 现在您可能已经注意到,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],
    .......
    ....

现在您会注意到有代码行 ?(/* 来自 Google Finance API 的 AAPL 历史 OHLC 数据 *//* 2006 年 5 月 */ 在 json 源中通过生成解析错误导致事情出错,因为具有此类代码行的数据源不是有效的 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>

关于javascript - Highcharts - 无法运行示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24897172/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com