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

#09:データビジュアライゼーション 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会員登録のうえ
有料会員登録が必要です

無料会員登録して始める

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

参考になるWebサイト

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

有料プランで現役エンジニアに相談可能！

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

実行する

採点する

入力
出力
コンパイルエラー
実行時エラー

出力タイプ：

コード判定結果

参考になるWebサイト