ChartJSでスマホ判定してyAxesの表示を変える方法

まずワイヤーを作成し、その後チュートリアルでチャートJSを埋め込んで、更にその後、ワイヤーに沿ってチャートを作成し、PC、SP版で表示を確認します。
最後に、SP版のyAxesの表示を調整します。

### ワイヤー
直近1年の受注件数を棒グラフか折れ線グラフで表現したい
ワイヤーはざっくり作っただけなので、作りながら調整する

### Chart.jsのCDN
公式サイトを覗きます: https://cdnjs.com/libraries/Chart.js
-> 2.9.3が最新で出てきます。圧縮版のmin.jsを使います。

### チュートリアル

<body>
	<h1>棒グラフ</h1>
	<canvas id="my_chart">Canvas is not supported...</canvas>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
	<script>
		(function(){
			'use strict';

			var type = 'line';
			var data = {
				labels: ['1月', '2月', '3月', '4月'],
				datasets: [{
					label: '売上高',
					data:[1200000, 1350000, 1140000, 1090000]
				}]
			};
			var options;
			var ctx = document.getElementById('my_chart').getContext('2d');

			var myChart = new Chart(ctx, {
				type: type,
				data: data,
				options: options
			});
		})();
	</script>
</body>

### 折れ線から棒グラフにカスタマイズ
– minを0からスタートにする
– optionを追加

<body>
	<h1>グラフ</h1>
	<canvas id="my_chart">Canvas is not supported...</canvas>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
	<script>
		(function(){
			'use strict';

			var type = 'bar';
			var data = {
				labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				datasets: [{
					label: '売上高',
					data:[1200000, 1350000, 1140000, 1090000, 650000, 2300000, 990000, 950000, 1120000, 1340000, 750000, 1450000],
					backgroundColor: "rgba(63, 191, 191, 0.5)"
				}]
			};
			var options = {
				scales: {
					yAxes: [{
						ticks: {
							suggestedMin: 0,
							callback: function(value, index, values){
								return value + '円'
							}
						}
					}]
				}
			}
			var options;
			var ctx = document.getElementById('my_chart').getContext('2d');

			var myChart = new Chart(ctx, {
				type: type,
				data: data,
				options: options
			});
		})();
	</script>
</body>

これをトップページに入れ込む
PC

sp

### spの場合はyAxisを表示させたくない
UserAgentでiPhoneかAndroidを含む場合は、yAxesのdisplayをfalseにしたい

if(navigator.userAgent.match(/iPhone|Android.+Mobile/)){
				var display = false;
			} else {
				var display = true;
			}
			var type = 'bar';
			var data = {
				labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				datasets: [{
					label: '売上高',
					data:[1200000, 1350000, 1140000, 1090000, 650000, 2300000, 990000, 950000, 1120000, 1340000, 750000, 1450000],
					backgroundColor: "rgba(63, 191, 191, 0.5)"
				}]
			};
			var options = {
				responsive: true,
				scales: {
					yAxes: [{
						ticks: {
							display: display,
							suggestedMin: 0,
							callback: function(value, index, values){
								return value + '円'
							}
						}
					}]
				}
			}

SP

やりたいことは出来た。

Canvas

<!DOCTYPE html>
<html>
	<head>
		<title>canvas tutorial</title>
		<style>
			#canvas {
				background: #666;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="640" height="480"></canvas>
		<script>
			var canvas = document.getElementById("canvas");
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<title>canvas tutorial</title>
		<style>
			#canvas {
				background: #666;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="640" height="480"></canvas>
		<script>
			var canvas = document.getElementById("canvas");
			function onDown(e){
				console.log("down");
			}
			function onUp(e){
				console.log("up");
			}
			function onClick(e){
				console.log("click");
			}
			function onOver(e){
				console.log("mouseover");
			}
			function onOut(){
				console.log("mouseout");
			}

			canvas.addEventListener('mousedown', onDown, false);
			canvas.addEventListener('mouseup', onUp, false);
			canvas.addEventListener('click', onClick, false);
			canvas.addEventListener('mouseover', onOver, false);
			canvas.addEventListener('mouseout', onOut, false);
		</script>
	</body>
</html>

jsからCanvas

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>JavaScriptでスクリーンショット</title>
</head>

<body>
	<hr>
	<div style="background-color : #AAEEDD"><h1>JavaScriptで撮るスクリーンショット</h1></div>
	<div id="target">
	<h2>導入方法と処理概要</h2>
	<table border="1" width="500" cellspacing="0" cellpadding="5" bordercolor="#333333" style="table-layout: fixed;">
	<tr>
		<th bgcolor="#7b9ad0" width="40"><font color="#FFFFFF">No</font></th>
		<th bgcolor="#7b9ad0" width="230"><font color="#FFFFFF">概要</font></th>
		<th bgcolor="#7b9ad0" width="230"><font color="#FFFFFF">補足</font></th>
	</tr>
	<tr>
		<td bgcolor="#b1d7e4" width="40" align="right">1</td>
		<td bgcolor="#7b9ad0" width="230">任意のタイミングでhtml2canvas関数を呼ぶ</td>
		<td bgcolor="#7b9ad0" width="230">※今回はオンロード処理</td>
	</tr>
	<tr>
		<td bgcolor="#b1d7e4" width="40" align="right">2</td>
		<td bgcolor="#7b9ad0" width="230">任意のタイミングでhtml2canvas関数を呼ぶ</td>
		<td bgcolor="#7b9ad0" width="230">※今回はオンロード処理</td>
	</tr>
	<tr>
		<td bgcolor="#b1d7e4" width="40" align="right">3</td>
		<td bgcolor="#7b9ad0" width="230">onrendered処理にて指定のElementに画像を追記</td>
		<td bgcolor="#7b9ad0" width="230">※[img]タグの[src]や、[a]タグの[href]など</td>
	</tr>
</table>
</div>
<br>
<hr>
<h3>↓↓ここから画像↓↓ (上の対象のDIVを画像化)</h3>
<img src="" id="result">
<h3>↑↑ここまで画像↑↑</h3>

<hr>

<a href="" id="ss" download="html_ss.png">スクリーンショット(document.body全体)をダウンロード</a>
<hr>
<h3>注意</h3>
<ul>
	<li>実際にはスクリーンショットを撮っているわけではない</li>
	<li>html2canvasは、HTML内のDOMやCCSを解釈してCanvas上に描画するライブラリ</li>
	<li>つまり、レンダリングエンジンに近い動作をする</li>
	<li>そのため、ブラウザと異なる表示がされる場合がある</li>
	<li>flashやapplet, iframe(別URL)はうまくキャプチャできない</li>
</ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script>
	window.onload = function(){

		html2canvas(document.getElementById("target"),{
			onrendered: function(canvas){
				var imgData = canvas.toDataURL();
				document.getElementById("result").src = imgData;
			}
		});

		html2canvas(document.body, {
			onrendered: function(canvas){
				var imgData = canvas.toDataURL();
				document.getElementById("ss").href = imgData;
			}
		});
	}
</script>
</body>
</html>

Canvasでiconを作る

<style>
	ul.icon{
		list-style:none;
	}
	ul.icon li {
		position: relative;
		margin-bottom: 0.5em;
	}
	ul.icon li canvas {
		position: absolute;
		top: 0.3em;
		left: -13px;
	}
</style>
<ul class="icon">
	<li>item01</li>
	<li>item02</li>
	<li>item03</li>
	<li>item04</li>
	<li>item05</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var list = $('ul.icon li');
	list.prepend('<canvas width="20" height="20" />');
	var ctx = null;

	list.each(function (i){
		var canvas = $('canvas', list).get(i);
		ctx = canvas.getContext('2d');
		drawIcon();
	});

	function drawIcon(){
		ctx.beginPath();
		ctx.arc(6, 10, 6, 0, Math.PI*2);
		ctx.fillStyle = 'rgb(50, 150, 255)';
		ctx.fill();

		ctx.beginPath();
		ctx.moveTo(5, 7);
		ctx.lineTo(8, 9);
		ctx.lineTo(5, 12);
		ctx.closePath();
		ctx.fillStyle = 'rgb(255, 255, 255)';
		ctx.fill();
	}
});
</script>

なるほどー

set interval

var canvas = null;
var ctx = null;
var frameRate = 1000/30;
var frame = 0;
var assets = ['/media/img/gamedev/robowalk/robowalk00.png',
              '/media/img/gamedev/robowalk/robowalk01.png',
              '/media/img/gamedev/robowalk/robowalk02.png',
              '/media/img/gamedev/robowalk/robowalk03.png',
              '/media/img/gamedev/robowalk/robowalk04.png',
              '/media/img/gamedev/robowalk/robowalk05.png',
              '/media/img/gamedev/robowalk/robowalk06.png',
              '/media/img/gamedev/robowalk/robowalk07.png',
              '/media/img/gamedev/robowalk/robowalk08.png',
              '/media/img/gamedev/robowalk/robowalk09.png',
              '/media/img/gamedev/robowalk/robowalk10.png',
              '/media/img/gamedev/robowalk/robowalk11.png',
              '/media/img/gamedev/robowalk/robowalk12.png',
              '/media/img/gamedev/robowalk/robowalk13.png',
              '/media/img/gamedev/robowalk/robowalk14.png',
              '/media/img/gamedev/robowalk/robowalk15.png',
              '/media/img/gamedev/robowalk/robowalk16.png',
              '/media/img/gamedev/robowalk/robowalk17.png',
              '/media/img/gamedev/robowalk/robowalk18.png'
             ];
var frames = [];

var onImageLoad = function(){
    console.log("IMAGE!!!");
};

var setup = function() {
    body = document.getElementById('body');
    canvas = document.createElement('canvas');

    ctx = canvas.getContext('2d');
    
    canvas.width = 100;
    canvas.height = 100;

    body.appendChild(canvas);

    for(var i = 0; i < assetes.length; i++){
    	frames.push(new Image());
    	frames[i].src = asset[i];
    	frames[i].onload = onImageLoad;
    }
    setInterval(animate, frameRate);
};

var animate = function(){
    context.clearRect(0,0,canvas.width, canvas.height);
    frame = (frame + 1) % frames.length;
};

setup();

onload image

var canvas = null;
var context = null;

setup = function(){
	canvas = document.getElementById("my_canvas");
	context = canvas.getContext('2d');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	// var img = document.getElementById("scream");
	// ctx.drawImage(img,10,10);
	img = new Image();
	img.onload = onImageLoad;
	img.src = "ralphyrobot.png";
};

onImageLoad = function(){
	console.log("IMAGE!!");
};

onImageLoad

var onImageLoad = function(){
	console.log("IMAGE!!!");
	context.drawImage(img,192,192)
};

first canvas

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id="my_canvas"></canvas>
</body>
<script>
	var canvas = null;
	var context = null;

	setup = function(){

	canvas = document.getElementById("my_canvas");
	context = canvas.getContext('2d');
	canvas.width = 1200;
	canvas.height = 720;
	};
</script>
</html>

Canvas

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<canvas id="c" width="200" height="200"></canvas>s
	<script>
		var c = document.querySelector("#c");
		var ctx = c.getContext("2d");

		var image = new Image();

		image.onload = function(){
			console.log("Loaded image");
			ctx.drawImage(image, 0, 0, c.width, c.height);
		}

		image.src = "fry_fixed.jpg";
	</script>
</body>
</head>
</html>

画像作成アプリ

canvasで、ctx.moveTo(startX, startY);ctx.lineTo(x, y);ctx.stroke();で線を描画します。canvas.toDataURL().replace(‘image/png’,’application/octet-stream’)で、画像をダウンロードします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Canvas</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>
    #mycanvas{
      border: 10px solid #999;
      cursor: crosshair;
    }
    .thumbnail{
      border: 2px solid #999;
      margin-right: 5px;
    }
    </style>
  </head>
  <body>
    <h1>Canvas</h1>
    <p>
      <select id="penColor">
        <option value="black">黒</option>
        <option value="red">赤</option>
        <option value="blue">青</option>
        <option value="white">白</option>
      </select>
      <select id="penWidth">
        <option value="1">細</option>
        <option value="3">中</option>
        <option value="5">太</option>
      </select>
        <input type="button" id="erase" value="消去">
        <input type="button" id="save" value="ギャラリーに追加">
    </p>
    <canvas id="mycanvas" width="400" height="200">
    Canvasの対応ブラウザを使用ください。</canvas>
    <div id="gallery"></div>
    <p>
    </p>
    <script>
      $(function(){
        var canvas = document.getElementById('mycanvas');
        if (!canvas || !canvas.getContext) return false;
        var ctx = canvas.getContext('2d');
        var startX,
            startY,
            x,
            y,
            borderWidth = 10,
            isDrawing = false;

        $('#mycanvas').mousedown(function(e){
            isDrawing = true;
            startX = e.pageX - $(this).offset().left - borderWidth;
            startY = e.pageY - $(this).offset().top - borderWidth;
        })
        .mousemove(function(e){
            if (!isDrawing) return;
            x = e.pageX - $(this).offset().left - borderWidth;
            y = e.pageY - $(this).offset().top - borderWidth;
            ctx.beginPath();
            ctx.moveTo(startX, startY);
            ctx.lineTo(x, y);
            ctx.stroke();
            startX = x;
            startY = y;
        })
        .mouseup(function() {
           isDrawing = false;
        })
        .mouseleave(function(){
           isDrawing = false;
        });

        $('#penColor').change(function(){
          ctx.strokeStyle = $(this).val();
        });
        $('#penWidth').change(function(){
          ctx.lineWidth = $(this).val();
        });
        $('#erase').click(function(){
            if(!confirm('本当に消去しますか?')) return;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        });
        $('#save').click(function(){
            var img = $('<img>').attr({
              width: 100,
              height: 50,
              src: canvas.toDataURL()
            });
            var link = $('<a>').attr({
              href: canvas.toDataURL().replace('image/png','application/octet-stream'),
              download: new Date().getTime() + '.png'
            });
            $('#gallery').append(link.append(img.addClass('thumbnail')));
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        });

      });
    </script>
  </body>
</html>

落下するアニメーション

window.onload = function(){
  draw();
}
function draw(){
  var canvas = document.getElementById('mycanvas');
  if (!canvas || !canvas.getContext)return false;
  var ctx = canvas.getContext('2d');

  ctx.fillStyle = "red"
  var y = 0;

  (function loop(){
    ctx.clearRect(0,0,canvas.width, canvas.height);
    if (y > canvas.height) y = -50;
    y++;
    ctx.fillRect(0,y,50,50);
    setTimeout(loop,10);
  })();
}