JavaScript图表库Highcharts入门教程（八）：气泡图

气泡图例是一个附加元素，可以将其添加到图表图例中的任何位置。气泡图例允许以简单透明的方式显示气泡系列的比例。

Highcharts是一款纯JavaScript编写的图表库，为你的Web 站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

Highcharts最新版本v8.0.0发布，添加了带有动画的数据排序等新功能，并修复了一些BUG。戳此处查看详情！

Highcharts最新试用版

具有自动调整范围的演示

带有气泡图例的演示，其样式与该系列类似

带范围的演示

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

配置

的代码bubbleLegend很容易设置，并且可以进行很多自定义。选项的一部分（如minSize， maxSize，  sizeBy）和大小计算方法的工作方式与气泡系列相同。

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

用例

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

1.自动：不定义范围。在图例中创建三个气泡，最小和最大气泡的大小和值与气泡系列中的气泡相同（包括所有气泡系列）。中间的气泡具有其他两个气泡的平均值。如果图表上只有一个气泡点，则气泡图例也将只有一个气泡。

{    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.自定义：具有手动定义的范围。气泡是根据，和计算的ranges，不包括气泡系列尺寸。minSizemaxSize

{    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正版授权的朋友，欢迎咨询在线客服
标签：