jQuery(JavaScript)でグラフ系アプリ? メモ

2015年01月01日

jQuery(JavaScript)でグラフ系アプリ? メモ

jQuery(JavaScript)でグラフ系アプリ? メモ
こんなをつくってみた。
: jqPlot レスポンシブ サンプル //画像指定1HTML
//jQueryのJavaScript2

2つの「プラグイン」に注目てみた。(Google APIもよかったが・・・)

(お勉強の仕方かな?)



1つ目 「jqPlot」
プラグインが ネットとフォルダーの2通りあるのが特徴で面白い。
http://kwski.net/jquery/
http://kwski.net/jquery/1083/
ここ
http://alphasis.info/jquery/


2つ目 「TableBarChart」
Excelのような表(テーブル)からグラフをつくる。

http://mementoo.info/archives/764

http://wiki.aiwsolutions.net/2014/03/20/tablebarchart-plugin/

http://www.dream-net.org/blog/?p=1189

http://kachibito.net/web-design/tablebarchart.html
//////

参考
「 jQuery 」のグラフ


「jqPlot」は、2つのサイト


2つのサイトが参考に!

A 「 jQuery 」 一覧
http://kwski.net/jquery/

http://kwski.net/jquery/1083/

各種グラフ作成方法は以下にあります。
折れ線グラフ | 円グラフ | 棒グラフ | ローソク足チャート

まず、上の4つで、「ダイレクト」プラグインを学ぶ

「サンプル」で「ソース」ページをみる。

こんな感じ
http://kwski.net/jquery/998/
////
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-

scale=1.0">
<title>
:
jqPlot 折線グラフ サンプル </title>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/lab/css/ie.css" /><script type="text/javascript" 

src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<link rel="stylesheet" type="text/css" href="/lab/css/bootstrap.css" /><link rel="stylesheet" type="text/css" 

href="/lab/css/bootstrap-responsive.css" /><script type="text/javascript" 

src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" 

src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script><link rel="stylesheet" type="text/css" 

href="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.css" /><script type="text/javascript" 

src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.min.js"></script><script 

type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/excanvas.min.js"></script><script 

type="text/javascript" 

src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>

<hr>
<div class="container">
<hr>

<div id="div998"></div>

<script type="text/javascript">
$(document).ready(function(){

  // オプション
  options = {
    // グラフのタイトル
    title:{text:'日経平均株価 推移'},
    axes:{                                 // 軸
      // 横軸(x軸)
      xaxis:{
        renderer:$.jqplot.DateAxisRenderer,// プラグイン
        min: '2011-01-01',                 // 軸開始の値
        max: '2013-02-01',                 // 軸終了の値
        tickInterval:'3 months',           // 目盛りの間隔
        tickOptions:{formatString:'%Y/%m'},// 表示フォーマット
        label:'month',                     // ラベル
      },
      // 縦軸(y軸)
      yaxis:{                              
        label:'日経平均株価(円)',          // ラベル
      }
    }
  }

  // 表示データ
  data = [[
    ['2011/01/01',10237.92],['2011/02/01',10624.09],
    ['2011/03/01',9755.10],['2011/04/01',9849.74],
    ['2011/05/01',9693.73],['2011/06/01',9816.09],
    ['2011/07/01',9833.03],['2011/08/01',8955.20],
    ['2011/09/01',8700.29],['2011/10/01',8988.39],
    ['2011/11/01',8434.61],['2011/12/01',8455.35],
    ['2012/01/01',8802.51],['2012/02/01',9723.24],
    ['2012/03/01',10083.56],['2012/04/01',9520.89],
    ['2012/05/01',8542.73],['2012/06/01',9006.78],
    ['2012/07/01',8695.06],['2012/08/01',8839.91],
    ['2012/09/01',8870.16],['2012/10/01',8928.29],
    ['2012/11/01',9446.01],['2012/12/01',10395.18],
    ['2013/01/01',11138.66],['2013/02/01',11559.36]
  ]]

  $.jqplot(
    'div998',  // グラフ表示する#div
    data,      // 表示データ
    options    // オプション
  );
  });
</script>
</div>
<hr>


<div class="container" id="ads">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

//////
 
各種オプション
凡例


http://alphasis.info/jquery-plugins/jqplot/

jQuery 入門
http://alphasis.info/jquery/

jqPlot
各種グラフ(チャート、図表)を生成するには、jQuery の jqPlot プラグインが便利。


線グラフ 
縦棒グラフ 
横棒グラフ 
面グラフ 
ウォーターフォールチャート 
散布図 
バブルチャート 
マリメッコチャート 
円グラフ 
ドーナツグラフ 
メーターゲージ 
トレンドライン
ローソク足 
いかり足 
ブロックチャート 
ピラミッドグラフ
など

/////
レーダーチャートがあればうれしいが・・・
/////

例えば、

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/lab/css/ie.css" /><script type="text/javascript" 

src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<link rel="stylesheet" type="text/css" href="/lab/css/bootstrap.css" /><link rel="stylesheet" type="text/css" 

href="/lab/css/bootstrap-responsive.css" /><script type="text/javascript" 

src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" 

src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script><link rel="stylesheet" type="text/css" 

href="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.css" /><script type="text/javascript" 

src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.min.js"></script><script 

type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/excanvas.min.js"></script><script 

type="text/javascript" 

src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>

の下に「追加」(プラグイン)する
「plugins/jqplot.trendline.min.js」が必要な場合
たとえば、
<script language="javascript" type="text/javascript" 

src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/plugins/jqplot.trendline.min.js"></script>

/////
//画像指定  HTML
//jQueryのJavaScript
の2つ

で新しいもの
プログラムを追加する。

//////
上の例を利用して、たとえば、以下のプログラムに書き換える
//////
jQuery の jqPlot で作るトレンドラインのラベルを含む凡例付き折れ線グラフ

<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta  content="width=device-width, 

initial-scale=1.0" name="viewport">
<title>
:
jqPlot レスポンシブ サンプル </title>
<!--[if lt IE 9]>
<link                                              rel="stylesheet" type="text/css" href="/lab/css/ie.css"/><script 

type="text/javascript" 

src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

<link  href="/lab/css/bootstrap.css" type="text/css" rel="stylesheet"><link  href="/lab/css/bootstrap-responsive.css" 

type="text/css" rel="stylesheet"><script type="text/javascript" 

src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" 

src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script><link  

href="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.css" type="text/css" rel="stylesheet"><script 

type="text/javascript" 

src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.min.js"></script><script 

type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/excanvas.min.js"></script>
<script language="javascript" type="text/javascript" 

src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/plugins/jqplot.trendline.min.js"></script>

//画像指定1HTML
<div  id="jqPlot-sample" style="height: 300px; width: 300px;"></div>

//jQueryのJavaScript2
<script type="text/javascript">
jQuery( function() {
    jQuery . jqplot . config . enablePlugins = true;
    Tarou = [ [ 1, 65 ], [ 2, 72 ], [ 3, 74 ], [ 4, 63 ], [ 5, 85 ], [ 6, 70 ] ];
    Hanako = [ [ 1, 93 ], [ 2, 81 ], [ 3, 79 ], [ 4, 88 ], [ 5, 78 ], [ 6, 96 ] ];
    Ichirou = [ [ 1, 81 ], [ 2, 86 ], [ 3, 71 ], [ 4, 69 ], [ 5, 58 ], [ 6, 82 ] ];
    jQuery . jqplot(
        'jqPlot-sample',
        [
            Tarou, Hanako, Ichirou
        ],
        {
            series: [
                {
                    color: '#bfff80',
                    label: '姉',
                    trendline: {
                        color: '#80ff00',
                        label: '姉トレンドライン',
                    }
                },
                {
                    color: '#80ffbf',
                    label: '妹2',
                    trendline: {
                        color: '#00ff80',
                        label: '妹トレンドライン',
                    }
                },
                {
                    color: '#80bfff',
                    label: '私(女子)',
                    trendline: {
                        color: '#0080ff',
                        label: '私(女子)のトレンドライン',
                    }
                }
            ],
            legend: {
                show: true,
                placement: 'outside',
                location: 'ne',
            }
        }
    );
} );
</script>

<hr>


<div  id="ads" class="container">

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script></div>

/////

: jqPlot レスポンシブ サンプル //画像指定1HTML
//jQueryのJavaScript2

//////
////// 
追加1 「多角形レーダーチャート」について
(現在は、PC画面のみ? OK)

追加2 「多角形レーダーチャート」について
(PCもスマホもOK)
多角形レーダーチャートの作り方

html5のcanvasを使って多角形レーダーチャートが作れます

TOPを下のように記述すると、ダイレクト!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://oreweb.toypark.in/jquery.canvasChart/js/jquery.canvasChart.js"></script> 
////// 


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://oreweb.toypark.in/jquery.canvasChart/js/jquery.canvasChart.js"></script>

<script type="text/javascript">
$(function(){
$('#canvasChart01').canvasChart({
polygon : 5,
valuation : 7,//評価値
valuationCntPrint : false,//評価の数値表記
valuationName : ['英語','国語','数学','理科','社会'],//評価名
radius : 120,//半径
bgFill : false,//背景の塗り
chartStrokeColor : ['#fd9'],//チャートの線
chartFillColor : ['rgba(250, 200, 100, 0.5)'],//チャートの塗り
checkbox : true,//チェックボックス機能、radio selectに対応、inputのnameにcheckboxを指定してください
compare : true,//比較機能、使用する際はselectableかcheckboxをtrueにしてください
chartPoint : false,//チャートの点描画
gauge : false,//中央からのゲージライン描画
scale : false//ゲージラインの目盛り描画
    });
});
</script>

<div  id="canvasChart01">
<canvas  height="360" width="360"></canvas>
<strong>checkbox compare</strong>:
1<input  value="1" name="checkbox" type="checkbox">
2<input  value="2" name="checkbox" type="checkbox">
3<input  value="3" name="checkbox" type="checkbox">

<div  class="chartInput">
<input  name="input1" id="input1" value="7" type="hidden">
<input  name="input2" id="input2" value="4" type="hidden">
<input  name="input3" id="input3" value="7" type="hidden">
<input  name="input4" id="input4" value="4" type="hidden">
<input  name="input5" id="input5" value="7" type="hidden">

</div>
<div  class="chartInput">
<input  name="input1" id="input1" value="6" type="hidden">
<input  name="input2" id="input2" value="3" type="hidden">
<input  name="input3" id="input3" value="6" type="hidden">
<input  name="input4" id="input4" value="3" type="hidden">
<input  name="input5" id="input5" value="6" type="hidden">

</div>
<div  class="chartInput">
<input  name="input1" id="input1" value="5" type="hidden">
<input  name="input2" id="input2" value="2" type="hidden">
<input  name="input3" id="input3" value="5" type="hidden">
<input  name="input4" id="input4" value="2" type="hidden">
<input  name="input5" id="input5" value="5" type="hidden">

</div>
<div  class="chartInput">
<input  name="input1" id="input1" value="4" type="hidden">
<input  name="input2" id="input2" value="1" type="hidden">
<input  name="input3" id="input3" value="4" type="hidden">
<input  name="input4" id="input4" value="1" type="hidden">
<input  name="input5" id="input5" value="4" type="hidden">

</div>
</div>

/////
5教科 レーダーチャート 完成例
///// 
/////
レーダーチャート
(現在はPC画面のみ?)

<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <head>
   <title>インラインSVGでレーダーチャートを作る</title>
  </head>
  <script src="jquery-2.0.2.min.js" type="text/javascript" charset="utf-8"></script>
  <script>
   $(function(){
    var allPentagonPoints = []
     var skills = ["HTML","CSS","javascript","PHP","Ruby"]
     drawSelectLevelForm()
     drawChartFoundation()
     drawChartSkillLabels()
 
     //五角形を生成
     function createPentagons(dis){
      //polygon要素を生成
      var Pentagon=document.createElementNS("http://www.w3.org/2000/svg","polygon");
      var pentagonPoints ="";
      for (var i = 0; i < 5; i++){
    var x = Math.cos(((72*i)-90)*Math.PI/180)*dis;
    var y = Math.sin(((72*i)-90)*Math.PI/180)*dis;
    pentagonPoints += (x+250) +","+ (y+220) + " ";
   }
      allPentagonPoints.push(pentagonPoints);
       //座標を設定
       Pentagon.setAttribute("points",pentagonPoints);
       return Pentagon;
      }
 
     //レーダーチャートの土台を作る。生成した五角形を表示
     function drawChartFoundation(){
      //中心からの距離ごとに五角形をつくる
      var distance = [1,50,100,150,200];
      for(var i=0; i<distance.length; i++){
document.getElementById("chart_foundation_pentagons").appendChild(createPentagons(distance[i]));
      }
     }
 
     //レーダーチャートの項目を表示
     function drawChartSkillLabels(){
      $(skills).each(function(index,val){
       var maxPentagonNum = allPentagonPoints.length-1;
       var maxPentagonPointsX = allPentagonPoints[maxPentagonNum].split(" ")[index].split(",")[0];
       var maxPentagonPointsY = allPentagonPoints[maxPentagonNum].split(" ")[index].split(",")[1];
       var text = document.createElementNS("http://www.w3.org/2000/svg","text");
       text.innerHTML = val
       text.setAttribute("x",maxPentagonPointsX)
       text.setAttribute("y",maxPentagonPointsY)
       text.setAttribute("class","skill_label")
       if(index >= (skills.length/2+0.5)){
        text.setAttribute("text-anchor","end")
       }
       document.getElementById("chart_foundation_pentagons").appendChild(text);
       })
      }
 
     //スキルごとのレベル選択フォームを作成
     function drawSelectLevelForm(){
      var selectLavelElem =""
      var optionElem = ""
      for(var i=0; i<=4; i++){
       optionElem += '<option value="'+ [i] +'">level'+ [i] +'</option>'
      }
      for(var j=0; j<skills.length; j++){
       selectLavelElem += '<label for="select_level_'+ skills[j] +'">'+ skills[j] +'</label><select id="select_level_'+ skills[j] +'" class="select_level" >' + optionElem +'</select>'
      }
      $("#select_skill_container").prepend(selectLavelElem)
     }
 
     //フォームで入力した値でチャートを生成
     $("#submit").click(function(){
      $(".status,.marker_point").remove();
      //polygon要素を生成
      var chartPolygon = document.createElementNS("http://www.w3.org/2000/svg","polygon");
      var chartPolygonPoint =""
      //chartPolygonの座標を設定
      $(".select_level").each(function(i){
       var levelNum = parseInt($(this).val());
       var selectedPoint = allPentagonPoints[levelNum].split(" ")[i].split(",");
       chartPolygonPoint += selectedPoint[0] +","+ selectedPoint[1] + " ";
       drawchartPointMarker(selectedPoint[0],selectedPoint[1]);
      });
      chartPolygon.setAttribute("points",chartPolygonPoint);
      chartPolygon.setAttribute("class", "status");
      document.getElementById("chart_Polygon").appendChild(chartPolygon);
     });
 
     //赤い多角形の頂点に点を表示
     function drawchartPointMarker(x,y){
      //circle要素を生成
      var marker = document.createElementNS("http://www.w3.org/2000/svg","circle");
      marker.setAttribute("cx",x)
      marker.setAttribute("cy",y)
      marker.setAttribute("r",5)
      marker.setAttribute("class","marker_point")
      document.getElementById("marker_points_wrap").appendChild(marker);
     }
    })
  </script>
  <style>
   body,input,select{
    font-family: verdana;
    color: #808080;
   }
   #svg_container{
    width:600px;
    height:450px;
    margin:auto;
   }
   #chart_container{
    width:500px;
    height:500px;
    display: block;
    margin: auto;
   }
   #chart_foundation_pentagons {
    fill:none;
    stroke: #7ac5e9;
    stroke-width:1px;
    stroke-dasharray:3px;
   }
   .skill_label{
    margin-right: 10px;
    margin-left: 10px;
    display: block;
    fill:#808080;
    stroke: none;
    stroke-dasharray:0px;
   }
   #chart_Polygon{
    position: absolute;
    fill:#ff8e8e;
    stroke: none;
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    z-index: 0;
   }
   #marker_points_wrap{
    fill:#808080;
   }
   #select_skill_container{
    width:650px;
    height:450px;
    margin:auto;
   }
  </style>
  <body>
   <div class="svg_container">
    <svg id="chart_container">
     <g id="chart_foundation_pentagons"></g>
     <g id="chart_Polygon"></g>
     <g id="marker_points_wrap"></g>
    </svg>
   </div>
   <div id="select_skill_container">
    <input type="submit" value="submit" id="submit"/>
   </div>
  </body>
</html>

/////
Android/iPhone/Windows Phone対応 jQuery Mobileスマートフォンアプリ開発

の本 
(プログラムを書いて、(ブログ内に)作成してみよう)

 ここ
/////
jQuery API  サンプル集  (Ajax など JSON)

jQuery API  サンプル集 


/////
 

rikezyo00sumaho at 00:00|PermalinkComments(0)