Webデザイン入門編2:データビジュアライゼーション Chart.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset='UTF-8'>
		<title>Chart sample</title>
	</head>
	<body>
		<canvas id='myChart'></canvas>
		<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>

		<script>
		var chart_data = {
			labels: ['Java', 'python', 'Ruby', 'php', 'Scala'],
			datasets: [

			]
		}

		var chart_options = {
			scale:{
				ticks:{
					min:0,
				}
			},

		}

		var ctx = document.getElementById('myChart');
		ctx.height = 50;

		var myRadarChart = new Chart(ctx, {
			type: 'radar',
			data: chart_data,
			options: chart_options
		});
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset='UTF-8'>
		<title>Chart sample</title>
	</head>
	<body>
		<canvas id='myChart'></canvas>
		<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>

		<script>
		var chart_data = {
			labels: ['Java', 'python', 'Ruby', 'php', 'Scala'],
			datasets: [

			]
		}

		var chart_options = {
			scale:{
				ticks:{
					min:0,
				}
			},

		}

		var ctx = document.getElementById('myChart');
		ctx.height = 50;

		var myRadarChart = new Chart(ctx, {
			type: 'radar',
			data: chart_data,
			options: chart_options
		});
		</script>
	</body>
</html>

この動画を見るには

paiza会員登録のうえ

有料会員登録が必要です

Tips

次のレッスンへ前のチャプターへ

※有料会員になるとこの動画をご利用いただけます

詳しい説明を読む

＃09:データビジュアライゼーション Chart.js

チャートを簡単に作成できるライブラリ、Chart.jsを紹介します。

参考になるWebサイト

chart.js
https://www.chartjs.org/

プログラミング学習 > Webデザイン入門編 > Webデザイン入門編2: レイアウトパターンとビジュアルデザイン > データビジュアライゼーション Chart.js

ログインすると採点できます

コードの実行

有料会員になるとエンジニアに質問ができます

出力タイプ：