Highcharts Bubble 气泡图解析

Highcharts.js2025-11-24 18:27

Bubble 气泡图

Highcharts的气泡图是一种三维数据可视化图表，它通过气泡在直角坐标系中的位置（X、Y轴）和气泡大小（Z值）来展示数据关系。

你可以利用Highcharts轻松创建和定制各种样式的气泡图。气泡图例允许以简单透明的方式展示气泡系列的比例尺。

安装

需要设置 highcharts-more.js. 要显示气泡图例，需将 legend.bubbleLegend.enabled 设置为 true.

配置

bubbleLegend i的代码是非常简单的设置，它允许大量的定制。 minSize,， maxSize, ，sizeBy, 等选项的部分和大小计算方法的工作方式与气泡序列相同。

默认样式设置取自第一个可见的气泡系列。气泡图例元素在图表中的位置由图例位置决定。

使用案例

有两种方法可以在图表中添加气泡图例：

1. Automatic 自动: 不定义范围。

在图例中创建三个气泡，最小和最大的气泡具有与气泡系列中对应的气泡相同的尺寸和值（包括所有气泡系列）。中间的气泡是其他两个气泡的平均值。如果图表上只有一个气泡点，则气泡图例也将只有一个气泡。

js 复制代码

{
    chart: {
        type: 'bubble'
    },
    legend: {
        bubbleLegend: {
            enabled: true
        }
    },
    series: [{
        data: [
            [9, 81, 63],
            [98, 5, 89],
            [51, 50, 73],
            [41, 22, 14],
            [58, 24, 20]
        ]
    }]
}

2. Custom 自定义: 通过手动定义范围。

气泡的大小基于 ranges、minSize 和 maxSize 计算，气泡系列的尺寸不包括在内。

js 复制代码

{
    chart: {
        type: 'bubble'
    },
    legend: {
        bubbleLegend: {
            enabled: true,
            minSize: 20,
            maxSize: 60,
            ranges: [{
                value: 14
            }, {
                value: 89
            }]
        }
    },
    series: [{
        minSize: 20,
        maxSize: 60,
        data: [
            [9, 81, 63],
            [98, 5, 89],
            [51, 50, 73],
            [41, 22, 14],
            [58, 24, 20]
        ]
    }]
}

注意事项

引入必要的模块：创建气泡图需要引入基础的 highcharts.js 文件。如果你的气泡图涉及一些高级功能（如气泡图例），则可能需要额外引入 highcharts-more.js 模块。

处理标签重叠：当数据点较多、气泡密集时，启用的数据标签可能会出现重叠。你可以尝试设置 dataLabels.inside: false 将标签显示在气泡外部，或使用 distance 等属性微调标签位置来改善。

希望这些信息能帮助你快速上手Highcharts气泡图。