Question

我正在尝试在html中显示jQuery圆环饼图

并在我的网页

中实现了这一点

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

        <script>
            $(function () {
                // Create the chart
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'pie'
                    },
                    title: {
                        text: 'Browser market share, April, 2011'
                    },
                    yAxis: {
                        title: {
                            text: 'Total percent market share'
                        }
                    },
                    plotOptions: {
                        pie: {
                            shadow: false
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
                        }
                    },
                    series: [{
                            name: 'Browsers',
                            data: [["Firefox", 6], ["MSIE", 4], ["Chrome", 7], ["opera", 7]],
                            size: '60%',
                            innerSize: '20%',
                            showInLegend: true,
                            dataLabels: {
                                enabled: false
                            }
                        }]
                });
            });
        </script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </body>
</html>

当我运行我的页面时，页面中没有显示任何空白页面

当我检查浏览器控制台时，我看到以下错误

Uncaught ReferenceError: $ is not defined(anonymous function) @ Donut_pie+two.php:18
highcharts.js:306 Uncaught TypeError: Cannot read property 'addEvent' of undefined(anonymous function) @ highcharts.js:306(anonymous function) @ highcharts.js:308(anonymous function) @ highcharts.js:324
exporting.js:9 Uncaught TypeError: Cannot read property 'fireEvent' of undefined(anonymous function) @ exporting.js:9(anonymous function) @ exporting.js:23

有人可以帮助我解决这个问题吗

Answer 1

放置你的

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

befor <script></script>标记

喜欢这个

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(function () {
        // Create the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'pie'
            },
            title: {
                text: 'Browser market share, April, 2011'
            },
            yAxis: {
                title: {
                    text: 'Total percent market share'
                }
            },
            plotOptions: {
                pie: {
                    shadow: false
                }
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
                }
            },
            series: [{
                    name: 'Browsers',
                    data: [["Firefox", 6], ["MSIE", 4], ["Chrome", 7], ["opera", 7]],
                    size: '60%',
                    innerSize: '20%',
                    showInLegend: true,
                    dataLabels: {
                        enabled: false
                    }
                }]
        });
    });
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

jquery甜甜圈饼图不显示页面

1 个答案: