Posted at

Chart.jsを用いたバブルチャートの表示

More than 1 year has passed since last update.

Chart.jsを用いてバブルチャートを表示する際の、サンプルソースです。


test_chart_bubble.html

<html>

<head>
<title>Chart.jsバブルチャートテスト</title>
<meta name="description" content="Chart.js">
<meta name="keywords" content="Chart.js">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="js_bubble/Chart.min.js"></script>
<script type="text/javascript" src="js_bubble/Chart.bundle.min.js"></script>
<script type="text/javascript" src="js_bubble/chart_bubble_test.js"></script>

</head>

<body bgcolor="lightcyan" >
<!--バブルチャートの箇所 -->
<canvas id="bubblechart" height="450" width="600"></canvas>

</body>
</html>



chart_bubble_test.js

$(function(){

// バブルチャートのデータ
var bubleChartData = {
datasets: [
{
// データ(1個目)
data: [{"x":10 ,"y":10, "r":30} ,],
// 色(1個目)
backgroundColor:[ "rgb(141,63,223)" ],
// ラベル
label: ["test1"]
},
{
// データ(2個目)
data: [{"x":20 ,"y":20, "r":50} ,],
// 色(2個目)
backgroundColor:[ "rgb(141,29,73)"],
// ラベル(2個目)
label: ["test2"]
},
{
// データ(3個目)
data: [{"x":30 ,"y":30, "r":70} ,],
// 色(3個目)
backgroundColor:["rgb(16,230,73)"],
// ラベル(3個目)
label: ["test3"]
}
]};

// オプション
var options = {
// タイトル
title: {
display: true,
text: 'バブルチャートテスト'
},
// スケール
scales: {
// x軸
xAxes: [{
ticks: {max: 50, min: 0,stepSize: 10}
}],
// x軸
yAxes: [{
ticks: {max: 50,min: 0,stepSize: 10}
}]
},
// tooltip
tooltips: {
callbacks: {
label: function(t, d) {
var rLabel = d.datasets[t.datasetIndex].data[t.index].r;
return d.datasets[t.datasetIndex].label +
': (x軸:' + t.xLabel + ', y軸:' + t.yLabel + ', 円の大きさ:' + rLabel + ')';
}
}
}
};

// コンテキストのオブジェクト
var ctx = $("#bubblechart")[0].getContext("2d");
// バブルチャートの描画
var bubbleChart = new Chart(ctx,
{
type: 'bubble',
data: bubleChartData,
options: options
});

});


上記ソースだとこんな風に表示されます。

キャプチャ.PNG


参考サイト

 ・chart.js入門

 ・バブルチャート · Chart.js 日本語ドキュメント