Highcharts-bubble-basic
提供：Dev Guides
ハイチャート-基本的なバブルチャート
以下は、基本的なバブルチャートの例です。
link：/highcharts/highcharts_configuration_syntax [Highcharts設定構文]の章でチャートを描画するために使用される設定はすでに見ました。
基本的なバブルチャートの例を以下に示します。
構成
ここで、追加の構成/実行された手順を見てみましょう。
チャート
チャートタイプをバブルベースに設定します。 chart.type は、チャートのシリーズタイプを決定します。 ここで、デフォルト値は「line」です。
チャートを構成してズーム可能にします。 chart.zoomTypeは、ユーザーがマウスをドラッグしてズームできる次元を決定します。 可能な値はx、yまたはxyです。
var chart = {
type: 'bubble',
zoomType: 'xy'
};例
*_highcharts_bubble_basic_*<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
<script src = "https://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>結果
結果を確認します。
