index.html

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

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)


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

// -------------------------------------------------------------------------
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}
]