- ベストアンサー
Web上でのグラフ表示方法
- Web上で利用者の利用時間帯を表示するグラフの表示方法を探しています。
- jQueryを使用して、データが一つの場合はColumn rangeを用いて表示できますが、複数のデータがある場合の表示方法がわかりません。
- データはPHPで取得し、PHP、JavaScript、jQuery、HTML5を使用してグラフ表示を行う予定です。
- kuuga5451
- お礼率54% (6/11)
- JavaScript
- 回答数4
- ありがとう数9
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
さっそく訂正。 ['月曜日', ['08:00-12:00', '13:00-18:00']], ['火曜日', ['10:00-13:00', '14:00-20:00']], 余計な大括弧を消してください。 > jQuery を希望 はぁ～？なにそれ？必要なの？という立ち位置（今年も！）
その他の回答 (3)
- babu_baboo
- ベストアンサー率51% (268/525)
お正月なので、いろいろと…手をぬきました。無駄が多いし。眠いし。 そもそもPHPで… <!DOCTYPE html> <meta charset="utf-8"> <title>ぐらふ</title> <body> <h3>あるユーザーの利用時間帯</h3> <canvas width="800" height="400" id="hoge"></canvas> <script> var data = [ ['月曜日', ['08:00-12:00]', '13:00-18:00']], ['火曜日', ['10:00-13:00]', '14:00-20:00']], ['水曜日', ['13:00-20:59]']], ['木曜日', ['9:00-12:00]', '13:00-18:00']], ['金曜日', ['9:00-12:00]', '13:00-16:00']], ['土曜日', []], ['日曜日', []] ]; var parm = { thead: [ '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00' ], thWidth : 0.15, //% thHeight : 0.1, //% offsetY : 30, offsetX : 10, min : 8*60, //8:00 max : 23*60, //23:00 border : 0.5, color : ['#fcc', '#ffc', '#fcf', '#ccf', '#cff', '#ccf', '#f88', '#f8f', '#8ff', '#88f', '#8ff'], thColor : '#000', font: 'italic 400 18px/2 sans-serif' }; var toMinute = function (hhmm) { var m = hhmm.split (':'); return parseInt (m[0], 10) * 60 + parseInt (m[1], 10); }; var toSpan = function (sectionTimeStr) { var t = sectionTimeStr.split ('-'); return { start: toMinute (t[0]), end: toMinute (t[1]) }; }; var conv = function (n) { return [n[0], n[1].map (toSpan)]; }; var draw = function (e, data, pram) { var ctx = e.getContext ('2d'); var w = e.offsetWidth -1; var h = e.offsetHeight -1; var x = w * parm.thWidth |0; var y = h * parm.thHeight |0; var len0 = data.length; var len1 = parm.thead.length; var i, I, j, J, px, py; var o, ox; var s = (parm.max - parm.min) / (w - x); var thh = (h - y) / len0; var bh = thh * parm.border + 1|0; var boh = (thh - bh) / 2 |0; var getP = function (n) { return ((n - parm.min) / s) |0; }; px = x, py = y; ctx.beginPath (); ctx.strokeStyle = '#343'; for (i = 0, I = len1; i < I; i++) { ctx.moveTo (px, y); ctx.lineTo (px, h); ctx.fillText (parm.thead[i], px + 2, py - 10, px); px += (w - x) / len1; } ctx.closePath(); ctx.stroke (); px = x, py = y; for (i = 0; i < len0; i++) { ctx.beginPath (); ctx.strokeStyle = '#343'; ctx.moveTo (0, py); ctx.lineTo (w, py); ctx.fillStyle = parm.thColor; ctx.font = parm.font; ctx.fillText (data[i][0], parm.offsetX, py + parm.offsetY, px); ctx.closePath(); ctx.stroke(); ctx.fillStyle = parm.color[i]; J = data[i][1].length; for (j = 0; j < J; j++) { o = data[i][1][j]; ox = getP(o.start); ctx.beginPath(); ctx.rect (x + ox, py + boh, getP(o.end) - ox, bh); ctx.fill (); ctx.closePath(); ctx.stroke(); } py += thh; } } draw (document.querySelector ('canvas'), data.map (conv), parm); </script>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシート部分書き換え--印刷対応タイプ追加 <style type="text/css"> <!-- table[summary="OrderedTable"]{ font-size:0.8em; border-collapse:collapse; border:1px black solid; line-height:2em; } table[summary="OrderedTable"] th,table[summary="OrderedTable"] td{ border:solid black 1px; } </style> <style type="text/css" media="screen"> <!-- table[summary="OrderedTable"] thead th+th, table[summary="OrderedTable"] td{width:3em;} } table[summary="OrderedTable"] th{font-weight:normal;} table[summary="OrderedTable"] td{text-indent:-4em;overflow:hidden;} table[summary="OrderedTable"] tbody tr td.O{background-color:blue;} table[summary="OrderedTable"] tbody tr+tr td.O{background-color:lime;} table[summary="OrderedTable"] tbody tr+tr+tr td.O{background-color:orange;} table[summary="OrderedTable"] tbody tr+tr+tr+tr td.O{background-color:aqua;} table[summary="OrderedTable"] tbody tr+tr+tr+tr+tr td.O{background-color:yellow;} table[summary="OrderedTable"] tbody tr+tr+tr+tr+tr+tr td.O{background-color:silver;} table[summary="OrderedTable"] tbody tr+tr+tr+tr+tr+tr+tr td.O{background-color:fuchsia;} --> </style> <style type="text/css" media="print"> <!-- table[summary="OrderedTable"] thead th+th, table[summary="OrderedTable"] td{width:3.5em;} } --> </style>
お礼
ありがとうございます。おかげでグラフ表示を行うことができました。 セルの色で時間帯を色づけするという方法は全く思いつかなかったので勉強になりました。 また何か質問を行ったときはよろしくお願いします。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
これグラフじゃなく、ちゃんとした表(table)です。 そんなのjQueryでなく、きちんと(PHP経由で)HTMLのtableとして出力すべきです。 PHP これはHTMLと同じ意味 JavaScript javascript有効のユーザーエージェントでなきゃだめ jQuery javascriptと同義 HTML5 後方互換の意味から薦めない。 まっとうに、PHPで、表を作成して、スタイルシートでデザインすれば良い。携帯電話(ガラケー)でも、印刷にも対応できるし、そもそも簡単!! ★タブは＿に置換してあるので戻す。 ★HTML4.01strict + CSS2.1 文字コードShift_JIS <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css" media="screen"> <!-- table[summary="OrderedTable"]{ font-size:0.8em; border-collapse:collapse; border:1px black solid; line-height:2em; } table[summary="OrderedTable"] th,table[summary="OrderedTable"] td{ border:solid black 1px; } table[summary="OrderedTable"] thead th+th, table[summary="OrderedTable"] td{width:3em;} } table[summary="OrderedTable"] th{font-weight:normal;} table[summary="OrderedTable"] td{text-indent:-4em;overflow:hidden;} table[summary="OrderedTable"] tbody tr td.O{background-color:blue;} table[summary="OrderedTable"] tbody tr+tr td.O{background-color:lime;} table[summary="OrderedTable"] tbody tr+tr+tr td.O{background-color:orange;} table[summary="OrderedTable"] tbody tr+tr+tr+tr td.O{background-color:aqua;} table[summary="OrderedTable"] tbody tr+tr+tr+tr+tr td.O{background-color:yellow;} table[summary="OrderedTable"] tbody tr+tr+tr+tr+tr+tr td.O{background-color:silver;} table[summary="OrderedTable"] tbody tr+tr+tr+tr+tr+tr+tr td.O{background-color:fuchsia;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> <!-- ここから --> <table summary="OrderedTable"> ＿<thead> ＿＿<tr> ＿＿＿<th></th> ＿＿＿<th>8:00</th><th>9:00</th><th>10:00</th><th>11:00</th><th>12:00</th> ＿＿＿<th>13:00</th><th>14:00</th><th>15:00</th><th>16:00</th><th>17:00</th> ＿＿＿<th>18:00</th><th>19:00</th><th>20:00</th><th>21:00</th> ＿＿</tr> ＿</thead> ＿<tbody> ＿＿<tr> ＿＿＿<th abbr="Mon">月曜日</th> ＿＿＿<td></td><td class="O">予約済</td><td class="O">予約済</td><td> ＿＿＿</td><td class="O">予約済</td><td class="O">予約済</td><td></td> ＿＿＿<td></td><td></td><td></td><td></td><td></td><td></td><td></td> ＿＿</tr> ＿＿<tr> ＿＿＿<th abbr="Tue">火曜日</th> ＿＿＿<td></td><td></td><td class="O">予約済</td><td class="O">予約済</td> ＿＿＿<td class="O">予約済</td><td class="O">予約済</td><td><td><td> ＿＿＿<td><td></td><td></td><td></td><td></td> ＿＿</tr> ＿＿<tr> ＿＿＿<th abbr="Wed">水曜日</th> ＿＿＿<td></td><td></td><td></td><td></td><td class="O">予約済</td><td class="O">予約済</td> ＿＿＿<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> ＿＿</tr> ＿＿<tr> ＿＿＿<th abbr="Thu">木曜日</th> ＿＿＿<td></td><td class="O">予約済</td><td class="O">予約済</td><td class="O">予約済</td> ＿＿＿<td></td><td></td><td></td><td class="O">予約済</td> ＿＿＿<td class="O">予約済</td><td></td><td></td><td></td><td></td><td></td> ＿＿</tr> ＿＿<tr> ＿＿＿<th abbr="Fri">金曜日</th> ＿＿＿<td></td><td class="O">予約済></td><td></td><td class="O">予約済</td> ＿＿＿<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td> ＿＿<tr> ＿＿＿<th abbr="Sat">土曜日</th> ＿＿＿<td></td><td></td><td></td><td></td><td class="O">予約済</td><td></td><td></td><td></td> ＿＿＿<td></td><td></td><td></td><td></td><td></td><td></td> ＿＿</tr> ＿＿<tr> ＿＿＿<th abbr="Sun">日曜日</th> ＿＿＿<td></td><td></td><td></td><td></td><td></td><td class="O">予約済</td><td></td><td></td> ＿＿＿<td></td><td></td><td></td><td></td><td></td><td></td> ＿＿</tr> ＿</tbody> </table> <!-- ここまで --> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
ありがとうございます。おかげでグラフ表示を行うことができました。 どちらの回答をＢＡにするか悩みましたがこちらが質問への回答に合っていたのでＢＡに選ばせていただきました。 また何か質問を行ったときはよろしくお願いします。