Highchart javascript 图表示例无效

Question

我是前端初学者，对HTML/CSS和Javascript了解不多。我正在尝试运行下面的代码示例 http://www.highcharts.com/docs/getting-started/your-first-chart URL 但由于某种原因，当我在浏览器上打开此 html 文件时它无法在我的机器上运行。它没有在应该显示图表的位置显示图表，对吗？我确定我在这里犯了一些愚蠢的错误。

你能帮忙看看这里有什么问题吗？我刚刚复制了我在网站示例中看到的内容。

请帮忙。

    <head> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script>
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    </head>
    <div id="container" style="height: 400px; min-width: 310px"></div>

    <script>
    $(function () {

        $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
            // Create the chart
            $('#container').highcharts('StockChart', {


                rangeSelector : {
                    selected : 1
                },

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

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

    });

    </script>

Answer 1

在您的脚本中 JQUERY 应该先加载，然后再加载其余的。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

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

<script>
$(function () {
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
        // Create the chart
        $('#container').highcharts('StockChart', {
            rangeSelector : {
                selected : 1
            },
            title : {
                text : 'AAPL Stock Price'
            },
            series : [{
                name : 'AAPL',
                data : data,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });
    });
});

</script>

Highchart javascript 图表示例无效

Highchart javascript chart example not working

html

javascript

highcharts

highstock