レスポンシブな2次元散布図を作成「Scatterplot」
当ページのリンクには広告が含まれています。
スポンサーリンク
レスポンシブな2次元散布図を作成するプラグイン「Scatterplot」を紹介します。
jQueryプラグイン「Scatterplot」
このプラグインを使えば、図表でもっともよく利用する「散布図」をWeb上で作成することができます。
しかも！レスポンシブ！
画像ではなく数値でプロットするので、プログラムとの連携も簡単ですね。
スポンサーリンク
デモの「身長 - 体重」の散布図をご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Scatterplot のデモでーす。">
<title>Scatterplot - jQuery Plugin Demo</title>
<link href="scatterplot.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/scatterplot/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>Scatterplot.jsのデモでーす。</h1>
<div id="responsiveDemo">
<span id="responsivePoint1"></span>
<span id="responsivePoint2"></span>
<span id="responsivePoint3"></span>
<span id="responsivePoint4"></span>
<span id="responsivePoint5"></span>
<span id="responsivePoint6"></span>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="scatterplot.js"></script>
<script>
$(document).ready(function () {
$('#responsiveDemo').scatter({ height: 500, width: '50%', xLabel: 'X軸 - 身長 [cm]', yLabel: 'Y軸 - 体重 [kg]', rows: 5, columns: 5, subsections: 5, responsive: true, xUnits: ["150", "160", "170", "180", "190", "200"], yUnits: [40, 50, 60, 70, 80, 90] });
$('#responsivePoint1').plot({ xPos: '10%', yPos: '10%', radius: 10, color: 'red' });
$('#responsivePoint2').plot({ xPos: '60%', yPos: '70%', radius: 10, color: 'blue' });
$('#responsivePoint3').plot({ xPos: '90%', yPos: '75%', radius: 10, color: 'green' });
$('#responsivePoint4').plot({ xPos: '50%', yPos: '60%', radius: 10, color: 'red' });
$('#responsivePoint5').plot({ xPos: '60%', yPos: '30%', radius: 10, color: 'blue' });
$('#responsivePoint6').plot({ xPos: '30%', yPos: '35%', radius: 10, color: 'green' });
});
</script>
</body>
</html>
スポンサーリンク