# Highcharts 氣泡圖
本章節我們將為大家介紹 Highcharts 的氣泡圖。
我們在前面的章節已經了解了 Highcharts 配置語法。接下來讓我們來看下 Highcharts 的其他配置。
## 配置
### chart 配置
配置 chart 的 type 為 'bubble' 。chart.type 描述了圖表類型。默認值為 "line"。
chart.zoomType 屬性可配置圖表放大 ,通過拖動鼠標進行縮放,沿x軸或y軸進行縮放,可以設置為:'x','y','xy'。
```
var chart = {
type: 'bubble',
zoomType: 'xy'
};
```
### 實例
文件名:highcharts_bubble_basic.htm
```
<html>
<head>
<title>Highcharts 教程 | 菜鳥教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/try/demo_source/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'bubble',
zoomType: 'xy'
};
var title = {
text: 'Highcharts Bubbles'
};
var series= [{
data: [[97, 36, 79], [94, 74, 60], [68, 76, 58], [64, 87, 56], [68, 27, 73], [74, 99, 42], [7, 93, 87], [51, 69, 40], [38, 23, 33], [57, 86, 31]]
}, {
data: [[25, 10, 87], [2, 75, 59], [11, 54, 8], [86, 55, 93], [5, 3, 58], [90, 63, 44], [91, 33, 17], [97, 3, 56], [15, 67, 48], [54, 25, 81]]
}, {
data: [[47, 47, 21], [20, 12, 4], [6, 76, 91], [38, 30, 60], [57, 98, 64], [61, 17, 80], [83, 60, 13], [67, 78, 75], [64, 12, 10], [30, 77, 82]]
}
];
var json = {};
json.chart = chart;
json.title = title;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
```
以上實例輸出結果為:

## 3D 氣泡圖
### series.marker
設置 series.marker 漸變讓其看起來有 3D 的效果。
```
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
]
}
}
```
### 實例
文件名:highcharts_bubble_3d.htm
```
<html>
<head>
<title>Highcharts 教程 | 菜鳥教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/try/demo_source/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
};
var title = {
text: 'Highcharts bubbles with radial gradient fill'
};
var xAxis = {
gridLineWidth: 1
};
var yAxis = {
startOnTick: false,
endOnTick: false
};
var series= [{
data: [
[9, 81, 63],
[98, 5, 89],
[51, 50, 73],
[41, 22, 14],
[58, 24, 20],
[78, 37, 34],
[55, 56, 53],
[18, 45, 70],
[42, 44, 28],
[3, 52, 59],
[31, 18, 97],
[79, 91, 63],
[93, 23, 23],
[44, 83, 22]
],
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
]
}
}
}, {
data: [
[42, 38, 20],
[6, 18, 1],
[1, 93, 55],
[57, 2, 90],
[80, 76, 22],
[11, 74, 96],
[88, 56, 10],
[30, 47, 49],
[57, 62, 98],
[4, 16, 16],
[46, 10, 11],
[22, 87, 89],
[57, 91, 82],
[45, 15, 98]
],
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
]
}
}
}
];
var json = {};
json.chart = chart;
json.title = title;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
```
以上實例輸出結果為:

- Highcharts 簡介
- Highcharts 環境配置
- Highcharts 配置語法
- Highcharts 配置選項詳細說明
- Highcharts 曲線圖
- Highcharts 基本曲線圖
- Highcharts 帶有數據標簽曲線圖表
- Highcharts 異步加載數據曲線圖表
- Highcharts 時間序列,可縮放的圖表
- Highcharts X 軸翻轉曲線圖
- Highcharts 帶標記曲線圖
- Highcharts 標示區曲線圖
- Highcharts 時間間隔圖表
- Highcharts 對數圖表
- Highcharts 區域圖
- Highcharts 基本區域圖
- Highcharts 使用負數區域圖
- Highcharts 堆疊區域圖
- Highcharts 百分比堆疊區域圖
- Highcharts 丟失值區域圖
- Highcharts 反轉x軸與y軸
- Highcharts 曲線區域圖
- Highcharts 區間區域圖
- Highcharts 使用區間和線的區域圖
- Highcharts 條形圖
- Highcharts 基本條形圖
- Highcharts 堆疊條形圖
- Highcharts 反向條形圖
- Highcharts 柱形圖
- Highcharts 基本柱形圖
- Highcharts 使用負值的反向柱形圖
- Highcharts 堆疊柱形圖
- Highcharts 堆疊組柱形圖
- Highcharts 使用百分比的堆疊柱形圖
- Highcharts 標簽旋轉柱形圖
- Highcharts 堆疊組柱形圖
- Highcharts 固定布局柱形圖
- Highcharts 使用 HTML 表格數據的柱形圖
- Highcharts 區間柱形圖
- Highcharts 餅圖
- Highcharts 基本餅圖
- Highcharts 顯示圖例餅圖
- Highcharts 圓環圖
- Highcharts 半圈圓環圖
- Highcharts 向下鉆取餅圖
- Highcharts 漸變餅圖
- Highcharts 單色餅圖
- Highcharts 散點圖
- Highcharts 氣泡圖
- Highcharts 動態圖
- Highcharts 組合圖
- Highcharts 柱形圖,線條圖,餅圖組合
- Highcharts 雙Y軸, 柱形圖,線條圖組合
- Highcharts 多Y軸組合
- Highcharts 散點圖上添加回歸線
- Highcharts 3D圖
- Highcharts 3D柱形圖
- Highcharts 帶空值(null)和0的3D柱形圖
- Highcharts 堆疊3D柱形圖
- Highcharts 3D餅圖
- Highcharts 3D圓環圖
- Highcharts 測量圖
- Highcharts 測量圖
- Highcharts 圓形進度條式測量圖
- Highcharts 時鐘
- Highcharts 雙軸車速表
- Highcharts 音量表(VU Meter)
- Highcharts 樹狀圖(Treemap)