2

我按照此链接使用 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>

我哪里错了？

4

2 回答 2

4

那是因为您似乎正在使用jQuery selector $('#container')

并且不在您的页面中包含 jQuery

检查小提琴

这是因为我们将 jQuery 包含为一个框架。

包括

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

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

于 2013-08-04T21:41:47.173 回答
0

你包括 highcharts.js 两次。

删除它在 body 标签内的最后一次出现。

于 2013-08-04T21:37:07.080 回答