Question

我是HTML和PHP的新手。我按照Highcharts.com的入门指南，我在下面写了HTML文件。我像index2.htm一样保存它，但它只显示“在脚本之前......”并且没有图表出现。
请帮我。非常感谢

<DOCTYPE HTML>
<html>
<head>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <title>Highcharts Example</title>                           
 </head>
 <body>
    <div id="container" style="width:100%; height:400px;"></div>
     <p>Before the script...</p>
    <script>
        $(function () { 
            var myChart = Highcharts.chart('container', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Fruit Consumption'
                },
                xAxis: {
                    categories: ['Apples', 'Bananas', 'Oranges']
                },
                yAxis: {
                    title: {
                        text: 'Fruit eaten'
                    }
                },
                series: [{
                    name: 'Jane',
                    data: [1, 0, 4]
                }, 
                {
                    name: 'John',
                    data: [5, 7, 19]
                }]
            });
        });
    </script>

</body>
</html>
</pre>

Answer 1

它不起作用的原因是你已经将它包装在匿名的jquery函数中并且没有包含JQuery引用。

如果您只是将脚本改为：

 var myChart = Highcharts.chart('container', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Fruit Consumption'
                },
                xAxis: {
                    categories: ['Apples', 'Bananas', 'Oranges']
                },
                yAxis: {
                    title: {
                        text: 'Fruit eaten'
                    }
                },
                series: [{
                    name: 'Jane',
                    data: [1, 0, 4]
                }, 
                {
                    name: 'John',
                    data: [5, 7, 19]
                }]
            });

这是一个简单的fiddle工作

Answer 2

您需要加载jquery，因为您正在查看的示例使用它。将jquery cdn添加到头部以加载jquery：

<script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>

请参阅下面的代码：

<DOCTYPE HTML>
<html>
<head>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
    <title>Highcharts Example</title>                           
 </head>

 <body>
    <div id="container" style="width:100%; height:400px;"></div>
     <p>Before the script...</p>
 <script>

  $(function () { 
            var myChart = Highcharts.chart('container', {
                chart: {
                    type: 'bar'
                },
                title: {
                    text: 'Fruit Consumption'
                },
                xAxis: {
                    categories: ['Apples', 'Bananas', 'Oranges']
                },
                yAxis: {
                    title: {
                        text: 'Fruit eaten'
                    }
                },
                series: [{
                    name: 'Jane',
                    data: [1, 0, 4]
                }, 
                {
                    name: 'John',
                    data: [5, 7, 19]
                }]
            });
        });
});


    </script>

</body>
</html>

简单的Highcharts但不运行

2 个答案: