先程、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);