今日の人気記事

  1. 英数字がパラパラめくれるボードを実装「Flight Board」
  2. スライドアニメーション「Keep It Simple Stupid Animate」
  3. アニメーション効果ありのレスポンシブボックス「Box to Full Width」
  4. スタイリッシュなチェックボックス・ラジオボタンを実装(CSS不要)「ArtDesign Radio CheckBox」
  5. 入力フォームの数値に3桁ごとにカンマを付ける「maskMoney」

指定した数値から折れ線グラフを描画「SimpleChart」

スポンサーリンク

指定した数値から折れ線グラフを描画するプラグイン「SimpleChart」を紹介します。

jQueryプラグイン「SimpleChart」

このプラグインを使えば、数値を指定するだけで折れ線グラフを描画することができます。

別系統のデータを異なる線色で同時にプロットすることもできます。

また、グラフのタイトルや色もオプションでカスタマイズすることができます。

スポンサーリンク

それではデモページをグラフをご覧ください。

「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>
スポンサーリンク

関連記事(一部広告含む)