# chart.js / canvas

chart.jsを使用してのグラフの描画, canvasでの図形の描画,立体図の描画

					
						// 線グラフ
						<script>
				      var ctx = document.getElementById('myChart1').getContext('2d');
							var myChart = new Chart(ctx, {
							  type: 'line',
							  data: {
							    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
							    datasets: [{
							      label: 'apples',
							      data: [12, 19, 3, 17, 6, 3, 7],
							      backgroundColor: "#376892",
							      borderWidth: [0],
							      pointRadius: [5, 5, 5, 5, 5, 5, 5],
							      pointBorderWidth: [2, 2, 2, 2, 2, 2, 2],
							      pointBorderColor: "white"
							    }, {
							      label: 'oranges',
							      data: [2, 29, 5, 5, 2, 3, 10],
							      backgroundColor: "#90aac1",
							      borderWidth: [0],
							      pointRadius: [5, 5, 5, 5, 5, 5, 5],
							      pointBorderWidth: [2, 2, 2, 2, 2, 2, 2],
							      pointBorderColor: "white"
							    }]
							  },
							  options: {
								  legend: {
				            position: "bottom"
				          },
								  tooltips: {
									  enabled: false
									}
									
							  }
							});
						</script>
					
				
					
						// 円グラフ(ドーナッツ)
						<script>
							var progress  = 88,   //進捗率
							    remaining = 100 - progress;  //残りぱーせんと
				      var ctx = document.getElementById("myChart2").getContext('2d');
							var myChart = new Chart(ctx, {
							  type: 'doughnut',
							  data: {
							    labels: ["M", "T"],
							    datasets: [{
							      backgroundColor: [
							        "#376892",
							        "#90aac1"
							      ],
							      borderWidth: [0,0],
							      borderColor: ["#90aac1", "#90aac1"],
							      data: [progress, remaining]
							    }]
							  },
							  options: {
								  legend: {
				            display: false
				          },
				          tooltips: {
					          enabled: false
				          }
							  }
							});
							$(function(){
								$('#doughnut p.chart_txt').text(progress); //進捗率を表示
							});
						</script>
					
	      
					
						<script>
							onload = function() {
							  draw1();
							  draw2();
							  draw3();
							};
							function draw1() {
							  /* canvas要素のノードオブジェクト */
							  var canvas = document.getElementById('myChart3_1');
							  /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
							  if ( ! canvas || ! canvas.getContext ) {
							    return false;
							  }
							  /* 2Dコンテキスト */
							  var ctx = canvas.getContext('2d');
							  ctx.scale(2,2);
							  /* 四角を描く */
							  ctx.beginPath();  //線を描くと宣言します
							  ctx.lineWidth = 2;
							  ctx.strokeStyle = "#90aac1";
							  ctx.moveTo(20, 30); //書き始める場所を指定します
							  ctx.lineTo(120, 30); //引きたい線の終点を指定します
							  ctx.lineTo(120, 130); //引きたい線の終点を指定します
							  ctx.lineTo(20, 130); //引きたい線の終点を指定します
							  ctx.closePath(); //描いた線を閉じます
							  ctx.stroke();  //できた図形を線で描画します
							}
							function draw2() {
							  /* canvas要素のノードオブジェクト */
							  var canvas = document.getElementById('myChart3_2');
							  /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
							  if ( ! canvas || ! canvas.getContext ) {
							    return false;
							  }
							 		  
							  /* 2Dコンテキスト */
							  var ctx = canvas.getContext('2d');
							  ctx.scale(2,2); // width="260" height="260" style="width: 130px; height: 130px;" canvasの大きさを倍にしてRetina対応
							  ctx.fillStyle = '#ccc';
							  ctx.fillRect(20, 30, 100, 100); //まとめて描画			  
							  ctx.clearRect(20,30, 20, 20); //指定削除
							}
							function draw3() {
							  /* canvas要素のノードオブジェクト */
							  var canvas = document.getElementById('myChart3_3');
							  /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
							  if ( ! canvas || ! canvas.getContext ) {
							    return false;
							  }
							  /* 2Dコンテキスト */
							  var ctx = canvas.getContext('2d'); 
							  ctx.scale(2,2);
							  ctx.beginPath();
							  ctx.fillStyle = '#376892';
							  ctx.arc(70, 80, 50, 0, Math.PI*2, true) //ctx.arc(x位置, y位置, 半径, 描画開始の角度, 描画終わりの角度(360 = Math.PI*2), 右まわりならture)
							  ctx.fill();
							  // 円弧の軸は円の中心なのでxyの位置座標は半径を足して調整する			  
							}
						</script>