LoginSignup
3
2

More than 1 year has passed since last update.

@teddokano

Chart.js の2系から4系(3系？)への移行：時系列グラフを描くときの注意点．

Last updated at Posted at 2023-03-16

これはなに?

Chart.jsで時系列グラフを描くときの方法についてのメモ．
バージョン4系(3系？)では2系で必要なかった指定の追加が必要だった．

Chart.jsを初めて試したときはこちらの非常にわかりやすい記事を参考にさせてもらった．　
しばらくこのサンプルコードのバージョン2.7.2をそのまま使っていたのだけど，現在最新の4.2.1に切り替えた．その際のグラフ設定の変更の他にHTML側でも設定を追加した．

やったこと　

HTMLの中で，CDNからChart.jsのライブラリをもらってくる部分．ここを変更

for_version2.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

時系列のグラフを描くので date-fns というライブラリを使いたいのだけど，2系では必要のなかったその指定が必要だった．　
さらにcdnjs.cloudflare.comサイトからではなぜかうかくいかなかったので，別のサーバからもらってくるようにした（ここを参考にした）．

for_version4.html
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

さらに

CDNを使うコードはインターネット接続が前提．
しかし作成中のシステムは組込用の小さな基板をHTMLサーバにして，ブラウザからアクセスして操作するだけのシステム．なのでインターネットに接続しなくても動くようになってるのが理想．
そういうわけでローカルにChart.jsをここからダウンロードしてきて，インターネットなしでも使えるように変更してみた．
ダウンロードしてきたchart.js-4.2.1.tgzを解凍し，package→dist→chart.umd.jsを組込システムのストレージにコピー．
HTMLは以下の1行だけ．CDNでv4.2.1を使う場合に必要だった2行目のdate-fnsを使う指定は必要ないみたい

for_local_version4.html
<script src="chartjs/chart.umd.js"></script>

さらに，さらに

CDNを使った例で，2系，4系の描画を行うサンプルの全体も載せておきます．
プロットしているデータはどちらも同じ．どちらもほぼ同じ結果が得られています．

ちなみに，バージョン4ではブラウザのウィンドウを小さくした時には随時リサイズされるのですが，大きくしたときにはグラフはそのままのサイズに留まってしまいます．
バージョン3系では4と同じのデータのまま，縮小/拡大リサイズの両方に対応できます．

バージョン2.7.2↓↓
chart272.png

バージョン4.2.1↓↓
chart421.png

下のサンプルコードはhtmlファイルとして保存してブラウザで開くと，そのまま結果を見ることができます．

chart_v2.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Chart.js 2.7.2 sample</title>
</head>
<body>
	Chart.js 2.7.2 sample
	
	<div>
		<canvas id="Chart0"></canvas>
	</div>
	
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
	<script>
		let	ctx = document.getElementById( "Chart0" );
		let chart = new Chart( ctx, 
			{
				type: 'line',
				data: {
					labels: [ "05:11:10", "05:11:11", "05:11:12", "05:11:13", "05:11:14", 
							  "05:11:15", "05:11:16", "05:11:17", "05:11:18", "05:11:19", 
							 ],
					datasets: [
						{
							label: 'x',
							data: [ 3, 2, 1, 5, 3, 7, 8, 9, 3, 9 ],
							borderColor: "rgba( 255, 0, 0, 1 )",
							backgroundColor: "rgba( 0, 0, 0, 0 )"
						},
						{
							label: 'y',
							data: [ 2, 9, 5, 4, 7, 4, 1, 0, 7, 3 ],
							borderColor: "rgba( 0, 255, 0, 1 )",
							backgroundColor: "rgba( 0, 0, 0, 0 )"
						},
						{
							label: 'z',
							data: [ 6, 0, 5, 1, 5, 8, 3, 2, 9, 8 ],
							borderColor: "rgba( 0, 0, 255, 1 )",
							backgroundColor: "rgba( 0, 0, 0, 0 )"
						},
					],
				},
				options: {
					animation: false,
					title: {
						display: true,
						text: '"g" now'
					},
					scales: {
						yAxes: [{
							ticks: {
								suggestedMax: 11,
								suggestedMin: -1,
								stepSize: 1,
								callback: function(value, index, values){
									return  value +  ' g'
								}
							},
							scaleLabel: {
								display: true,
								labelString: ' gravitational acceleration [g]'
							}
						}],
						xAxes: [{
							scaleLabel: {
								display: true,
								labelString: 'time'
							}
						}]
					},
				}
			}
		);
	</script>
</body>
</html>
chart_v4.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Chart.js 4.2.1 sample</title>
</head>
<body>
	Chart.js 4.2.1 sample
	
	<div>
		<canvas id="Chart0"></canvas>
	</div>
	<!--
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>	
	<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>	
	-->
	<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>	
	<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
	<script>
		let	ctx = document.getElementById( "Chart0" );
		let chart = new Chart( ctx, 
			{
				type: 'line',
				data: {
					labels: [ "05:11:10", "05:11:11", "05:11:12", "05:11:13", "05:11:14", 
							  "05:11:15", "05:11:16", "05:11:17", "05:11:18", "05:11:19", 
							 ],
					datasets: [
						{
							label: 'x',
							data: [ 3, 2, 1, 5, 3, 7, 8, 9, 3, 9 ],
							borderColor: "rgba( 255, 0, 0, 1 )",
							backgroundColor: "rgba( 0, 0, 0, 0 )",
							lineTension: 0.4,	//
						},
						{
							label: 'y',
							data: [ 2, 9, 5, 4, 7, 4, 1, 0, 7, 3 ],
							borderColor: "rgba( 0, 255, 0, 1 )",
							backgroundColor: "rgba( 0, 0, 0, 0 )",
							lineTension: 0.4,	//
						},
						{
							label: 'z',
							data: [ 6, 0, 5, 1, 5, 8, 3, 2, 9, 8 ],
							borderColor: "rgba( 0, 0, 255, 1 )",
							backgroundColor: "rgba( 0, 0, 0, 0 )",
							lineTension: 0.4,	//
						},
					],
				},
				options: {
					animation: false,
					plugins: {	//
						title: {
							display: true,
							text: '"g" now'
						}	//
					},
					scales: {
						y: {	//yAxes: [{
							suggestedMax: 11,	//
							suggestedMin: -1,	//
							ticks: {
								//suggestedMax: 11,
								//suggestedMin: -1,
								stepSize: 1,
								callback: function(value, index, values){
									return  value +  ' g'
								}
							},
							title: {	//scaleLabel: {
								display: true,
								text: ' gravitational acceleration [g]'	//labelString: ' gravitational acceleration [g]'
							}
						},
						x: {	//xAxes: [{
							title: {	//scaleLabel: {
								display: true,
								text: 'time'	//labelString: 'time'
							}
						}
					},
				}
			}
		);
	</script>
</body>
</html>

参考にしたサイト

関連情報

3
2
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
3
2