jQuery(JavaScript)でグラフ系アプリ? メモ
2015年01月01日
jQuery(JavaScript)でグラフ系アプリ? メモ
jQuery(JavaScript)でグラフ系アプリ? メモ
こんなをつくってみた。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>
/////
例
日経平均株価 推移 (JQueryで jqPlot グラフ データ徐々に追加)
株価 「日経平均とダウ平均」 推移(jQuery jqPlot 複数(折れ線)グラフ サンプル)
Fields Medalists (1936 - 2010) (数学のノーベル賞:フィールズ賞)「jQuery」 jqPlot 円グラフ
3人の「折れ線グラフ とトレンドライン」(jQuery jqPlot)
////// 株価 「日経平均とダウ平均」 推移(jQuery jqPlot 複数(折れ線)グラフ サンプル)
Fields Medalists (1936 - 2010) (数学のノーベル賞:フィールズ賞)「jQuery」 jqPlot 円グラフ
3人の「折れ線グラフ とトレンドライン」(jQuery jqPlot)
追加1 「多角形レーダーチャート」について
(現在は、PC画面のみ? OK)
追加2 「多角形レーダーチャート」について
(PCもスマホもOK)
多角形レーダーチャートの作り方
html5のcanvasを使って多角形レーダーチャートが作れます
TOPを下のように記述すると、ダイレクト!
//////
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|Permalink│Comments(0)