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

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

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

#完成イメージ

![スクリーンショット 2019-08-23 11.19.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/415531/b2f3966f-7e8a-7878-f1bd-ccdab16e62eb.png)

#ソースコード

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

```html: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](https://github.com/emn178/chartjs-plugin-labels...)
・chartjs-plugin-labelsはoptions内にpieceLabel：{}の記述で簡単に実装できて楽チン。
・キャンバスはそのまま記述すると縦に並んでしまうのでCSS内でfloat: left;を指定して左添えに整える。
・画像にはないけど受注率とかアクティブ案件数のチャートのキャンバスも記述あり。

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