折れ線グラフ（複数） | 動くWebデザインアイディア帳

グラフ
-折れ線グラフ（複数）-

デモページを見る

See the Pen 9-5-5　折れ線グラフ（複数） by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内の表示を確かめてね！

動きを実現する仕組み

Chart.js というチャートを作成するライブラリを使い、HTML 内の<canvas>タグにグラフを描画する。
グラフの描画はjquery.inview というライブラリを使って、要素が表示されたタイミングで開始。

［使用するライブラリ］
＊ jQuery
＊ Chart.js（https://www.chartjs.org/）
＊ jquery.inview（https://github.com/protonet/jquery.inview）

HTMLの書き方

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

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-5.js"></script>
</body>

自作の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);
		
                });
            }
        });
    }
});



//=========== 折れ線グラフ（複数） ============//
$('#chart02').on('inview', function(event, isInView) {//画面上に入ったらグラフを描画
if (isInView) {

var ctx=document.getElementById("chart02");//グラフを描画したい場所のid
var chart=new Chart(ctx,{
type:'line',//グラフのタイプ
data:{//グラフのデータ
	labels:["1月","2月","3月","4月","5月","6月",],//データの名前
	datasets: [
        {
			label:"Aさん",//グラフのタイトル
			borderColor: "rgba(255,0,0,1)",//グラフの線の色
			backgroundColor:"rgba(255,0,0,0)",//グラフの背景色透過
			data:["60","55","54","50","49","47",]//横列に並ぶデータ
        },{
			label:"Bさん",//グラフのタイトル
			borderColor: "rgba(130,201,169,0.5)",//グラフの線の色
			backgroundColor:"rgba(130,201,169,0)",//グラフの背景色透過
			data:["90","85","74","60","59","50",]//横列に並ぶデータ
        },{
			label:"Cさん",//グラフのタイトル
			borderColor: "rgba(255,183,76,0.5)",//グラフの線の色
			backgroundColor:"rgba(255,183,76,0)",//グラフの背景色透過
			data:["78","75","70","67","60","45",]//横列に並ぶデータ
        }
      ]

},
options:{//グラフのオプション
	legend:{
		display: true//グラフの説明を表示
	},
tooltips:{//グラフへカーソルを合わせた際のツールチップ詳細表示の設定
	callbacks:{
        label: function(tooltipItems, data) {
            if(tooltipItems.yLabel == "0"){
                return "";
            }
            return data.datasets[tooltipItems.datasetIndex].label + "：" + tooltipItems.yLabel + "Kg";//Kgを最後につける
        }
    }
	
	},
	title:{//上部タイトル表示の設定
		display: true,
		fontSize:10,
		text: '単位：Kg'
	},
	scales:{
		yAxes:[//グラフ縦軸（Y軸）設定
			{
				ticks:{
					beginAtZero:true,//0からスタート
					suggestedMax: 100,//最大が100
					suggestedMin: 0,//最小が0
					stepSize: 10,//10づつ数値が刻まれる
					callback: function(value){
						return  value +  'Kg'//数字＋%で表示			
				}
			}
			}
		],
		xAxes:[//棒グラフ横（X軸）設定
			{
				barPercentage:0.5,//バーの太さ
			}
		]
	}
}
});
    
}
});