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图表示例不起作用

1 个答案: