指定した数値から折れ線グラフを描画「SimpleChart」
当ページのリンクには広告が含まれています。
スポンサーリンク
指定した数値から折れ線グラフを描画するプラグイン「SimpleChart」を紹介します。
jQueryプラグイン「SimpleChart」
このプラグインを使えば、数値を指定するだけで折れ線グラフを描画することができます。
別系統のデータを異なる線色で同時にプロットすることもできます。
また、グラフのタイトルや色もオプションでカスタマイズすることができます。
スポンサーリンク
それではデモページをグラフをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="SimpleChart のデモでーす。">
<title>SimpleChart - jQuery Plugin Demo</title>
<link rel="stylesheet" href="css/BarGauge/jquery.BarGauge.css" type="text/css" />
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="jquery.SimpleChart.js"></script>
<script>
$(document).ready(function(e) {
var data = [{
values:[
{X:0,Y:10},
{X:1,Y:60},
{X:2,Y:70},
{X:3,Y:10},
{X:4,Y:90}
],
color:"red",
title:"赤"
},{
values:[
{X:0,Y:0},
{X:1,Y:10},
{X:2,Y:20},
{X:3,Y:30},
{X:4,Y:40}
],
color:"blue",
title:"青Blue Color"
}];
$('#demo').SimpleChart({
data:data,
title: "タイトルだよ",
maxValX: 4,
maxValY: 100,
});
});
</script>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/simplechart/">「jQueryプラグインまとめ」に戻る</a></p>
<h1>SimpleChart のデモ。</h1>
<div id="demo"></div>
</body>
</html>
スポンサーリンク