Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區(qū)域、區(qū)域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區(qū)域排列圖、區(qū)域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

Highcharts最新版本v8.0.0發(fā)布，添加了帶有動畫的數(shù)據(jù)排序等新功能，并修復了一些BUG。戳此處查看詳情！

點擊下載Highcharts最新試用版

具有自動調整范圍的演示

帶有氣泡圖例的演示，其樣式與該系列類似

帶范圍的演示

安裝需要highcharts-more.js。要顯示氣泡圖例，請設置legend.bubbleLegend.enabled為true。

配置

的代碼bubbleLegend很容易設置，并且可以進行很多自定義。選項的一部分（如minSize， maxSize，  sizeBy）和大小計算方法的工作方式與氣泡系列相同。

默認樣式設置來自第一個可見氣泡系列。氣泡圖例元素在圖表上的位置由圖例位置定義。

用例

有兩種方法可以將氣泡圖例添加到圖表中：

1.自動：不定義范圍。在圖例中創(chuàng)建三個氣泡，最小和最大氣泡的大小和值與氣泡系列中的氣泡相同（包括所有氣泡系列）。中間的氣泡具有其他兩個氣泡的平均值。如果圖表上只有一個氣泡點，則氣泡圖例也將只有一個氣泡。

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

{
    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]
        ]
    }]
}