Question

我跟着this link使用HighCharts Charting库绘制条形图。

它适用于jsfiddle但是当我尝试使用此代码构建HTML文件时，它不会显示任何内容。

这是我的html文件。

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
        <script src="http://code.highcharts.com/adapters/prototype-adapter.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script type="text/javascript">
            $(function () {
                    $('#container').highcharts({
                        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, 3]
                        },
                                 {
                            name: 'RAHUL',
                            data: [1, 5, 4]
                        }],
                    });
                });

        </script>
    </head>

    <body>

        <div id="container" style="height: 300px"></div>        
    </body>
</html>

我哪里出错了？

Answer 1

这是因为您似乎使用jQuery selector $（＆＃39;＃container＆＃39;）

并且不在页面中包含jQuery

<强> Check Fiddle

这有效，因为我们将jQuery作为一个框架。

包括

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

在你的highCharts库之前它应该可以正常工作。

Answer 2

你要两次包括highcharts.js。

删除身体标签内的最后一次出现。

高图表不起作用

2 个答案: