JS

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/9-5-6.css">

body内のグラフを表示させたい場所にid名を付けたcanvasタグを記載します。

<div class="chart-area">
	<canvas id="chart01"></canvas>
</div>

body 終了タグ直前に jQuery、Chart.js、jquery.inview.js 動きを制御する自作のJS の4 つを読み込みます

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<!--自作のJS-->
<script src="js/9-5-6.js"></script>

CSSの書き方

.chart-area{/*円グラフがスマホでつぶれないようにする*/
	position: relative;
	width:100%;
	height:50vh;
}

JSの書き方

//値をグラフに表示させる
Chart.plugins.register({
	afterDatasetsDraw: function (chart, easing) {
		var ctx = chart.ctx;
		chart.data.datasets.forEach(function (dataset, i) {
			var meta = chart.getDatasetMeta(i);
				if (!meta.hidden) {
					meta.data.forEach(function (element, index) {

						// 値の表示
						ctx.fillStyle = 'rgb(0, 0, 0,0.8)';//文字の色
						var fontSize = 12;//フォントサイズ
						var fontStyle = 'normal';//フォントスタイル
						var fontFamily = 'Arial';//フォントファミリー
						ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
						var dataString = dataset.data[index].toString();
					
						// 値の位置
						ctx.textAlign = 'center';//テキストを中央寄せ
						ctx.textBaseline = 'middle';//テキストベースラインの位置を中央揃え
						var padding = 5;//余白
						var position = element.tooltipPosition();
						ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);		
					});
				}
		});
	}
});


//=========== 円グラフ ============//
$('#chart01').on('inview', function(event, isInView) {//画面上に入ったらグラフを描画
	if (isInView) {
		var ctx=document.getElementById("chart01");//グラフを描画したい場所のid
		var chart=new Chart(ctx,{
			type:'pie',//グラフのタイプ
			data:{//グラフのデータ
				labels:[ "IT","営業","不動産","医療", ],//データの名前
				datasets:[ {
					label:"職種別比率",//グラフのタイトル
					backgroundColor:[ "#BB5179","#FAFF67", "#58A27C","#3C00FF" ],//グラフの背景色
					data:[ "20","30","10","40", ]//データ
				}]
			},
			options:{//グラフのオプション
				maintainAspectRatio: false,//CSSで大きさを調整するため、自動縮小をさせない
				legend:{
					display:true//グラフの説明を表示
				},
				tooltips:{//グラフへカーソルを合わせた際の詳細表示の設定
					callbacks:{
						label: function (tooltipItem, data) {
							return data.labels[tooltipItem.index]+ ": "+ data.datasets[0].data[tooltipItem.index] + "%";//%を最後につける
						}
					},		
				},
				title:{//上部タイトル表示の設定
					display: true,
					fontSize:10,
					text: '単位：%'
				},
			}
		});
	}
});