Go to Qiita Advent Calendar 2024 Top
LoginSignup
9
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@nomotom(NOMOTO M)

Chart.jsで実践的なダッシュボードをデザイン 2019

Last updated at Posted at 2019-08-23

#開発環境
Chart.js: v2.8.0
chartjs-plugin-labels: v1.0.0

#コンセプトは実践的なデザイン
Chart.jsを実践的に活用できるシーンとしてダッシュボードをデザインしてみた。
Chart.jsの投稿は基礎解説が多いけど、
ある程度習得した後に、じゃあ実践的にどんな成果物をアウトプットできるの？
というとこまで踏み込んでみたいということで投稿。

#完成イメージ

スクリーンショット 2019-08-23 11.19.59.png

#ソースコード

Sales Pipeline。
売上実績や売上推移、費用と利益の内訳、カテゴリーごとの内訳が分かります。
部署やチームの実績管理に使えて、営業部の部長/マネージャー層向け。
このダッシュボードのグラフ構成群は色んな部署で割とそのまま活用できると思う。

index.html
<!DOCTYPE html>
<html jang="ja">
<head>
	<meta charset="UTF-8">
	<title>Dash Board</title>
	<link rel="stylesheet" href="css/styles.css">
</head>
<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
	<script src="src/node_modules/Chart.PieceLabel.js/build/Chart.PieceLabel.min.js"></script>

	<header class="header">
		<ul>
		  <li><a href="index.html">Home</a></li>
		  <li><a href="#menu1">menu1</a></li>
		  <li><a href="#menu2">menu2</a></li>
		  <li><a href="#menu3">menu3</a></li>
		</ul>
	</header>

	<div class="chapter1">
		<h1>FY2019 Sales Pipeline</h1>

		<div class="charts1">
			<canvas id = "my_chart1"></canvas>
			<h1>50%</h1>
			<section class="labeltext">
				<label class="h2_1">500</label><label> / </label><label class="h2_2">1000</label>
			</section>	
		</div>
		<div class="charts1">
			<canvas id = "my_chart2"></canvas>
		</div>
		<div class="charts1">
			<canvas id = "my_chart3"></canvas>
		</div>
		<div class="charts1">
			<canvas id = "my_chart4"></canvas>
		</div>
		<div class="charts2">
			<canvas id = "my_chart5"></canvas>
		</div>
		<div class="charts1">
			<canvas id = "my_chart6"></canvas>
		</div>
		<div class="charts2">
			<canvas id = "my_chart7"></canvas>
		</div>

		<div class="charts1">
			<canvas id = "my_chart8"></canvas>
		</div>
		<div class="charts1">
			<canvas id = "my_chart9"></canvas>
		</div>
		<div class="charts1">
			<canvas id = "my_chart10"></canvas>
		</div>
		<div class="charts1">
			<canvas id = "my_chart11"></canvas>
		</div>
		<div class="charts2">
			<canvas id = "my_chart12"></canvas>
		</div>
	</div>

	</content>

<footer>

</footer>

</body>

	<script>
			(function() {
				'user strict';
				var type ='doughnut';
				var data = {data: [5,7,6]};
			var options = {
				title: {
					display: true,
					text: 'Achievement Rate',
					fontSize: 21
				},
				maintainAspectRatio: false
				};
				var ctx = document.getElementById('my_chart1').getContext('2d');
				var myChart = new Chart(ctx, {
					type: type,
					data: data,
					options: options
				});
			})();
	</script>
	
	<script>
		(function() {
			'user strict';
			var type ='bar';
			var data = {
				labels: ['TC','OC','SA'],
				datasets: [{
					label: 'Revenue',
					data: [5,7,6],
					backgroundColor: 'rgba(70,130,180,0.6)'
				},{
					label: 'Target',
					data: [16,22,19],
					backgroundColor: 'rgba(40,74,102,0.6)'

				}]
				};
			var options = {
				title: {
					display: true,
					text: 'Breakdown R/T',
					fontSize: 21
				},
				scales: {
					yAxes: [{
						ticks: {
							suggestedMin: 0,
							suggestedMax: 30
						}
					},
					],
					xAxes: [{
						maxBarThickness: 35
					}]
				},
				maintainAspectRatio: false
			};
			var ctx = document.getElementById('my_chart2').getContext('2d');
			var myChart = new Chart(ctx, {
				type: type,
				data: data,
				options: options
			});
		})();
	</script>

	<script>
		(function() {
			'user strict';
			var type ='bar';
			var data = {
				labels: ['TC','OC','SA'],
				datasets: [{
					label: 'Cost',
					data: [6,5,9],
					backgroundColor: 'rgba(204,0,78,0.6)'
				},{
					label: 'Profit',
					data: [15,17,16],
					backgroundColor: 'rgba(0,204,126,0.6)'
				}]
				};
			var options = {
				title: {
					display: true,
					text: 'Breakdown C/P',
					fontSize: 21,
				},
				pieceLabel: {
				    render: 'label',
				    position: 'default',
				    fontColor: 'white',
				    fontSize: 13
				},
				scales: {
					yAxes: [{
						stacked: true,
						ticks: {
							suggestedMin: 0,
							suggestedMax: 30
						}
					}],
					xAxes: [{
						stacked: true,
						maxBarThickness: 35,
					}]
				},
				maintainAspectRatio: false
			};
			var ctx = document.getElementById('my_chart3').getContext('2d');
			var myChart = new Chart(ctx, {
				type: type,
				data: data,
				options: options
			});
		})();
	</script>
	
	<script>
		(function() {
			'user strict';
		
			var type ='doughnut';
			var data = {
				labels: ['TC','OC','SA'],
				datasets: [{
					data: [122,53,33],
					backgroundColor: ['rgba(178,34,34,0.6)','rgba(34,179,92,0.6)','rgba(34,92,179,0.6)']
				}]
				};
			var options = {
				title: {
					display: true,
					text: 'Category',
					fontSize: 21
				},
				pieceLabel: {
				    render: 'percentage',
				    position: 'default',
				    fontColor: 'white',
				    fontSize: 13
				},
					maintainAspectRatio: false
				};
			var ctx = document.getElementById('my_chart4').getContext('2d');
			var myChart = new Chart(ctx, {
				type: type,
				data: data,
				options: options
			});
		})();
	</script>

	<script>
		(function() {
			'user strict';
	
			var type ='bar';
			var data = {
				labels: ['04','05','06','07','08','09','10','11','12','01','02','03'],
				datasets: [{
					label: 'TC',
					type: 'line',
					data: [31,51,66,77,87,131,180,241,278,310,370,400],
					fill: false,
					borderColor: 'rgba(178,34,34,0.7)',
					borderWidth: 2
				},{
					label: 'OC',
					type: 'line',
					data: [21,34,35,54,58,69,80,85,91,98,108,121],
					fill: false,
					borderColor: 'rgba(34,179,92,0.7)',
					borderWidth: 2
				},{
					label: 'SA',
					type:'line',
					data: [4,40,55,72,88,101,111,133,137,141,183,198],
					fill: false,
					borderColor: 'rgba(34,92,179,0.7)',
					borderWidth: 2
				},{
					label: 'Reveneu',
					data: [1,40,55,72,88,101,111,133,137,141,183,187],
					fill: false,
					backgroundColor: 'rgba(70,130,180,0.4)'
				},{
					label: 'Target',
					data: [9,40,55,72,88,101,111,133,137,141,183,198],
					fill: false,
					backgroundColor: 'rgba(40,74,102,0.4)'
				}]
				};
			var options = {
				title: {
					display: true,
					text: 'Sales Transition',
					fontSize: 21
				},
				scales: {
					yAxes: [{
						ticks: {
							suggestedMin: 0,
							suggestedMax: 200
						}
					}]
				},
				maintainAspectRatio: false,
			};
			var ctx = document.getElementById('my_chart5').getContext('2d');
			var myChart = new Chart(ctx, {
				type: type,
				data: data,
				options: options
			});
		})();
	</script>

	<script>
		(function() {
			'user strict';
		
			var type ='doughnut';
			var data = {
				labels: ['Orders','Before','Losts'],
				datasets: [{
					data: [122,53,33],
					backgroundColor: ['rgba(70,130,180,0.6)','rgba(70,130,180,0.3)','gray']
				}]
				};
			var options = {
				title: {
					display: true,
					text: 'Orders Rate',
					fontSize: 21
						
				},
				pieceLabel: {
					render: 'percentage',
				    position: 'default',
				    fontColor: 'white',
				    fontSize: 13
				},
				maintainAspectRatio: false
				};
			var ctx = document.getElementById('my_chart6').getContext('2d');
			var myChart = new Chart(ctx, {
				type: type,
				data: data,
				options: options
				});
			})();
	</script>

	<script>
		(function() {
			'user strict';
			var type ='horizontalBar';
			var data = {
				labels: ['SalesA','SalesB','SalesC','SalesD'],
				datasets: [{
					label: 'Orders',
					data: [7,2,5,3],
					backgroundColor: 'rgba(181,71,131,0.6)'
				},{
					label: 'Sales',
					data: [14,7,14,21],
					backgroundColor: 'rgba(70,130,180,0.6)'
				}]
				};
			var options = {
				title: {
					display: true,
					text: 'Records',
					fontSize: 21
				},
				scales: {
					xAxes: [{
						ticks: {
							suggestedMin: 0,
							suggestedMax: 10
						}
					}]
				},
				maintainAspectRatio: false
			};
			var ctx = document.getElementById('my_chart7').getContext('2d');
			var myChart = new Chart(ctx, {
				type: type,
				data: data,
				options: options
			});
		})();
	</script>

	<script>
		(function() {
			'user strict';
		
			var type ='doughnut';
			var data = {
				labels: ['Orders','Before','Losts'],
				datasets: [{
					data: [14,4,11],
					backgroundColor: [
						'rgba(178,34,34,0.6)','rgba(178,34,34,0.4)','gray']
				}]
				};
			var options = {
				title: {
					display: true,
					text: 'TC Orders Rate',
					fontSize: 21
						
				},
				pieceLabel: {
					render: 'percentage',
				    position: 'default',
				    fontColor: 'white',
				    fontSize: 13
				},
				maintainAspectRatio: false
				};
			var ctx = document.getElementById('my_chart8').getContext('2d');
			var myChart = new Chart(ctx, {
				type: type,
				data: data,
				options: options
				});
			})();
	</script>

	<script>
		(function() {
			'user strict';
			var type ='doughnut';
			var data = {
				labels: ['Orders','Before','Losts'],
				datasets: [{
					data: [8,2,1],
					backgroundColor: [
						'rgba(34,179,92,0.6)','rgba(34,179,92,0.4)','gray'
					],
				}]
				};
			var options = {
				title: {
					display: true,
					text: 'OC Orders Rate',
					fontSize: 21
						
				},
				pieceLabel: {
					render: 'percentage',
				    position: 'default',
				    fontColor: 'white',
				    fontSize: 13
				},
				maintainAspectRatio: false
				};
			var ctx = document.getElementById('my_chart9').getContext('2d');
			var myChart = new Chart(ctx, {
				type: type,
				data: data,
				options: options
			});
		})();
	</script>

	<script>
		(function() {
			'user strict';
			var type ='doughnut';
			var data = {
				labels: ['Orders','Before','Losts'],
				datasets: [{
					data: [7,2,3],
					backgroundColor: [
						'rgba(34,92,179,0.6)','rgba(34,92,179,0.4)','gray'
					],
				}]
				};
			var options = {
				title: {
					display: true,
					text: 'SA Orders Rate',
					fontSize: 21

				},
				pieceLabel: {
					render: 'percentage',
				    position: 'default',
				    fontColor: 'white',
				    fontSize: 13
				},
				maintainAspectRatio: false
				};
			var ctx = document.getElementById('my_chart10').getContext('2d');
			var myChart = new Chart(ctx, {
				type: type,
				data: data,
				options: options
			});
		})();
	</script>

	<script>
		(function() {
			'user strict';
			var type ='bar';
			var data = {
				labels: ['Enq','Vis','Pro','Pre','Tra','Fol'],
				datasets: [{
					data: [1,2,5,7,6,2],
					backgroundColor: [
						'rgba(169, 169, 169, 0.6)',
						'rgba(110, 168, 204, 0.6)',
						'rgba(83, 126, 153, 0.6)',
						'rgba(55, 84, 102, 0.6)',
						'rgba(28, 42, 51, 0.6)',
						'rgba(0, 0, 0, 0.6)'
					],
				}]
				};
			var options = {
				title: {
					display: true,
					text: 'Status',
					fontSize: 21
				},
				legend: {
					display: false
				},
				scales: {
					yAxes: [{
						stacked: true,
						ticks: {
							suggestedMin: 0,
							suggestedMax: 12
						}
					}],
					xAxes: [{
						stacked: true,
						maxBarThickness: 35,
					}]
				},
				maintainAspectRatio: false
			};
			var ctx = document.getElementById('my_chart11').getContext('2d');
			var myChart = new Chart(ctx, {
				type: type,
				data: data,
				options: options
			});
		})();
	</script>

	<script>
		(function() {
			'user strict';
			var type ='horizontalBar';
			var data = {
				labels: ['SalesA','SalesB','SalesC','SalesD'],
				datasets: [{
					label: 'Enquire',
					data: [1,0,0,2],
					backgroundColor: 'rgba(169, 169, 169, 0.6)'
				},{
					label: 'Visit',
					data: [0,2,1,1],
					backgroundColor: 'rgba(110, 168, 204, 0.6)'
				},{
					label: 'Proposal',
					data: [1,3,1,0],
					backgroundColor: 'rgba(83, 126, 153, 0.6)'
				},{
					label: 'Preparation',
					data: [1,0,3,0],
					backgroundColor: 'rgba(55, 84, 102, 0.6)'
				},{
					label: 'Training',
					data: [0,0,0,2],
					backgroundColor: 'rgba(28, 42, 51, 0.6)'
				},{
					label: 'Follow',
					data: [1,1,0,1],
					backgroundColor: 'rgba(0, 0, 0, 0.6)'
				}
				]
				};
			var options = {
				title: {
					display: true,
					text: 'Breakdown Status',
					fontSize: 21
				},
				scales: {
					yAxes: [{
						stacked: true,
						maxBarThickness: 28,
						ticks: {
							suggestedMin: 0,
							suggestedMax: 110
						}
					}],
					xAxes: [{
						stacked: true,
						maxBarThickness: 35,
						ticks: {
							suggestedMin: 0,
							suggestedMax: 12
						}
					}]
				},
				maintainAspectRatio: false
			};
			var ctx = document.getElementById('my_chart12').getContext('2d');
			var myChart = new Chart(ctx, {
				type: type,
				data: data,
				options: options
			});
		})();
	</script>

</html>

###簡易解説
・コピペ爆速理解できるようHTML内にJavaScriptを記述。
・５つのグラフの内、左上はh1タグのテキストをCSSで調整しただけ。
・Chart.jsはチャート内に％ラベルを置けないので、追加ライブラリのchartjs-plugin-labelsを設置。Github:plugin-labels GitHub
・chartjs-plugin-labelsはoptions内にpieceLabel：{}の記述で簡単に実装できて楽チン。
・キャンバスはそのまま記述すると縦に並んでしまうのでCSS内でfloat: left;を指定して左添えに整える。
・画像にはないけど受注率とかアクティブ案件数のチャートのキャンバスも記述あり。

機能の実装よりもUIデザインに時間がかかる。
この延長でCRMとかSFAまで作り込んだら楽しそう。
参考になれば幸い。('________')

9
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?