晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

Leaflet地図:「日本酒生産量:都道府県別マップ」の「白地図+QuickChart.io 版」作成。

先程、Leaflet地図「日本酒生産量:都道府県別マップ」の「白地図Google Charts(Image Charts)版」を作成した。

日本酒生産量の棒グラフを「Google Charts > Image Charts」で作成したが、左側のY軸を消す方法が見つからなかったので、グレーの縦線が付いてしまっていた。

URL指定でPNG画像のグラフを生成してくれるサービスで「QuickChart.io」というのが見つかった。(「QuickChart.io」は不安定かもしれない。

「QuickChart.io」を使うとY軸は付かない。

URLのパラメーター指定も、「Google Charts > Image Charts」と全く同じで使える。「Image-Charts」と違って、余分なロゴが入らない。

https://quickchart.io/chart?chs=30x300&cht=bvg&chco=00A5C6&chf=bg,s,ffffff00&chd=t:100

これを使って作成した「日本酒生産量:都道府県別マップ」が以下。

Google Charts > Image Charts」に比べて、値が小さいところはグラフが表示されない。

JavaScript サンプルソース(抜粋)≫
var maxvalue = 93599;	// 兵庫
for (var ix = 1; ix <= 47; ix++) {
	var value = fukenValue[ix];
	var barData = Math.ceil(value / maxvalue * 100);	// 最大:100
	var chartSize = barData * 3;				// 最大:300
	if (chartSize > 0) {
		var chartIcon = L.icon({
			// *** Google Charts API ***
			//	chs=30x300		サイズ
			//	cht=bvg			棒グラフ
			//	chco=00A5C6		色
			//	chf=bg,s,ffffff00	背景透過(ffffff00)
			//	chd=t:100		データ(最大:100)
			//	chl=兵庫		ラベル
			iconUrl: 'https://quickchart.io/chart?chs=30x' + chartSize + '&cht=bvg&chco=00A5C6&chf=bg,s,ffffff00&chd=t:100',
			iconSize: [30, chartSize],
			iconAnchor: [0, chartSize]
		});
		L.marker([todofuken[ix][1], todofuken[ix][2]], { icon: chartIcon }).addTo(map);
	}
}
map.setView([37, 137], 6);