canvas と css で対比横棒グラフを作る #CSS

テキストをコピーできるようにしました。

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="bar.js"></script>
<link href="bar.css" rel="stylesheet">
<title>canvas描く対比横棒グラフ</title>
</head>
<body>
<div id="picture">
<canvas id="bar_area" width="800" height="400"></canvas>
<div class="blob1"></div>
</div>
<div class="bottom">
Aug/07/2023<p />
</div>
</body>
</html>

bar.css

/* ------------------------------------------------------------- */
/*
	bar.css

					Jun/03/2017
*/
/* ------------------------------------------------------------- */
#picture {
    position: absolute;
	top: 0px;
	left: 0px;
}

.blob1{
	position: absolute;
	width: 500px;
	height: 500px;
	top: 0px;
	left: 0px;
}

.bottom{
	position: absolute;
	width: 500px;
	height: 500px;
	top: 350px;
	left: 0px;
}

/* ------------------------------------------------------------- */

bar.js

// -------------------------------------------------------------------------
//  bar.js
//
//						Aug/07/2023
// -------------------------------------------------------------------------
window.onload = ()=>
{
	const file_json = "pacific.json"

	fetch(file_json).then((response) => {
		if(!response.ok) {
			console.log('Read error!')
			throw new Error('error')
		} 
		console.log('Read ok!')
		return response.text()
	}).then((data)  => {
		const data_aa = JSON.parse(data)
		bar_proc (data_aa)
		})
}

// -------------------------------------------------------------------------
function bar_proc (data)
{
	var bar = document.getElementById('bar_area')
	var ctx = bar.getContext('2d')

	ctx.font = "18px 'ＭＳ Ｐゴシック'"
	ctx.strokeStyle = "black" 

	var yy = 30
	ctx.strokeText("パシフィック",250,yy)
	ctx.strokeText("勝利",420,yy)
	ctx.strokeText("敗北",150,yy)

	const xx = 250
	yy = 70
	ctx.strokeStyle = "blue"
	var str_teams = ""
	for (it in data)
		{
		const unit = data[it]
		draw_win_proc (ctx,xx+120,yy-18,unit.win)
		draw_lose_proc (ctx,xx-30,yy-18,unit.lose)

		const pos_left = 190 - unit.lose * 5
		const y_pos = yy - 18
		const str_div_a = '<div style="position:absolute; top:' + y_pos + 'px; left:'
		str_teams += str_div_a + pos_left + 'px;">' + unit.lose + '</div>'
		str_teams += str_div_a + xx + 'px;">' + unit.team + '</div>'
		const pos_right = 380 + unit.win * 5
		str_teams += str_div_a + pos_right + 'px;">' + unit.win + '</div>'


		yy += 50
		}

	document.querySelector(".blob1").innerHTML = str_teams
}

// -------------------------------------------------------------------------
function  draw_win_proc (ctx,xx,yy,nn)
{
	ctx.beginPath();
	ctx.fillStyle = 'green'
	ctx.rect (xx,yy,nn*5,20)
	ctx.fill()
	ctx.closePath()
	ctx.stroke();
}

// -------------------------------------------------------------------------
function  draw_lose_proc (ctx,xx,yy,nn)
{
	ctx.beginPath();
	ctx.fillStyle = 'red'
	ctx.rect (xx-nn*5,yy,nn*5,20)
	ctx.fill()
	ctx.closePath()
	ctx.stroke();
}

// -------------------------------------------------------------------------

pacific.json

[
{"team": "楽天","win": 33,"lose": 12},
{"team": "ソフトバンク","win": 32,"lose": 20},
{"team": "西武","win": 26,"lose": 21},
{"team": "オリックス","win": 22,"lose": 27},
{"team": "日本ハム","win": 21,"lose": 28},
{"team": "ロッテ","win": 15,"lose": 35}
]