Highcharts气泡图显示空白，请求排查是数据问题还是库Bug

嘿，我帮你排查了下这段代码，图表不显示既不是数据的问题，也不是Highcharts的Bug，是漏掉了几个气泡图必需的配置环节：

• 必须引入气泡图扩展模块：Highcharts的气泡图属于高级图表类型，核心库本身不包含这个功能，你需要额外加载highcharts-more.js模块。得确保在加载Highcharts核心文件之后，再引入这个扩展。

• 确认容器DOM元素存在：代码里指定了container作为渲染容器，但页面上必须要有对应的DOM节点，比如：

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

没有这个容器，图表根本没地方渲染。

• 可选：添加坐标轴范围适配：虽然不是强制要求，但如果只有单个数据点，默认坐标轴可能不会自动调整到合适范围，导致点被“藏”在边缘。可以手动配置坐标轴范围，让数据点清晰显示：

xAxis: { min: -2, max: 1 },
yAxis: { min: -4, max: 3 }

给你贴个修正后的完整代码示例：

<!-- 先引入Highcharts核心 -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- 再引入气泡图必需的扩展模块 -->
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<!-- 图表容器 -->
<div id="container" style="width: 600px; height: 400px;"></div>

<script>
Highcharts.chart('container', {
    chart: {
        type: 'bubble',
    },
    // 添加坐标轴范围配置
    xAxis: { min: -2, max: 1 },
    yAxis: { min: -4, max: 3 },
    series: [{
        "name": "First data set",
        "data": [{ "x": 0, "y": 2, "z": 4.61 }],
        "sizeByAbsoluteValue": true,
    }, {
        "name": "Second data set",
        "data": [{ "x": -1, "y": -3, "z": 4.6 }],
        "sizeByAbsoluteValue": true
    }]
});
</script>

按照上面的调整，你的气泡图应该就能正常显示两个数据点啦！

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