无法显示Highcharts简单饼图？复制官方代码仍报错求助

我帮你一步步捋捋这个饼图不显示的问题，我自己用Highcharts的时候也踩过好几个类似的坑，大概率是以下几个原因之一：

1. 最容易踩的大小写坑 #

你代码里写的是HighCharts.chart()，但Highcharts的全局变量是小写的h，也就是Highcharts.chart()！官方文档里全是这个写法，很多人会不小心写错大小写，导致浏览器找不到这个方法直接报错，这应该是最常见的问题。

2. 确认挂载容器存在且有效 #

你的代码是把图表挂载到id="container"的元素上，所以必须确保页面里有对应的DOM元素，而且要给它设置宽高（不然图表没地方渲染）：

<div id="container" style="width: 600px; height: 400px;"></div>

如果这个元素不存在、id拼写错了，或者没给宽高，Highcharts要么找不到挂载点，要么渲染出来看不见。

3. 检查Highcharts脚本是否正确引入 #

你得先在页面里引入Highcharts的核心脚本，不管用CDN还是本地文件，路径必须正确：

<script src="https://code.highcharts.com/highcharts.js"></script>

如果没引入或者路径错了，控制台会直接提示Highcharts is not defined。

4. 看控制台的具体错误信息 #

按下F12打开开发者工具，切换到Console标签，看看具体的报错内容：

• 如果提示Highcharts is not defined：脚本没引入或路径错误；
• 如果提示Cannot read properties of null (reading 'chart')：container元素找不到；
• 如果是语法错误：可能复制代码时多了或少了括号、逗号之类的符号。

修正后的完整示例代码 #

我把你的代码修正了大小写问题，加上了正确的脚本引入和容器，你可以直接运行试试：

<!DOCTYPE html>
<html>
<head>
    <title>Highcharts Pie Chart Demo</title>
    <!-- 引入Highcharts核心脚本 -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
    <!-- 图表挂载容器，必须给宽高 -->
    <div id="container" style="width: 800px; height: 400px;"></div>

    <script>
        // 注意这里是Highcharts（小写h）
        var yy = Highcharts.chart('container', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: 'Browser market shares in January, 2018'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            },
            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: [{
                    name: 'Chrome',
                    y: 61.41,
                    sliced: true,
                    selected: true
                }, {
                    name: 'Internet Explorer',
                    y: 11.84
                }, {
                    name: 'Firefox',
                    y: 10.85
                }, {
                    name: 'Edge',
                    y: 4.67
                }, {
                    name: 'Safari',
                    y: 4.18
                }, {
                    name: 'Sogou Explorer',
                    y: 1.64
                }, {
                    name: 'Opera',
                    y: 1.6
                }, {
                    name: 'QQ',
                    y: 1.2
                }, {
                    name: 'Other',
                    y: 2.61
                }]
            }]
        });
    </script>
</body>
</html>

先试试上面的步骤，应该能解决问题，如果还有报错，把控制台的错误信息贴出来，我再帮你分析~

内容的提问来源于stack exchange，提问作者harish