概要
オーバーレイは、Google グラフの上に配置される領域です。これは通常、特定の統計情報を呼び出すために使用されますが、HTML と CSS だけであるため、任意の値を指定できます。
シンプルな使い方としては、CSS クラスを作成し、HTML 内でそれを参照するだけです。JavaScript は必要ありません。さらに高度な場合、Google Chart を使用してオーバーレイの位置とコンテンツをカスタマイズできます。
簡単な例
最初の例では、JavaScript をまったく使用せずに、折れ線グラフにテキストをオーバーレイしています。
ここでは、内部スタイルシートで chartWithOverlay
と overlay
という 2 つのクラスを定義しています。chartWithOverlay
では相対位置、overlay
では絶対位置を使用します。
次に、ウェブページの本文で、コンテナとして chartWithOverlay
を使用し、グラフ(line-chart
)と overlay
を配置します。
.chartWithOverlay { position: relative; width: 700px; } .overlay { width: 200px; height: 200px; position: absolute; top: 60px; /* chartArea top */ left: 180px; /* chartArea left */ }
<div class="chartWithOverlay"> <div id="line-chart" style="width: 700px; height: 500px;"></div> <div class="overlay"> <div style="font-family:'Arial Black'; font-size: 128px;">88</div> <div style="color: #b44; font-family:'Arial Black'; font-size: 32px; letter-spacing: .21em; margin-top:50px; margin-left:5px;">zombie</div> <div style="color: #444; font-family:'Arial Black'; font-size: 32px; letter-spacing: .15em; margin-top:15px; margin-left:5px;">attacks</div> </div> </div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.arrayToDataTable([ ['Threat', 'Attacks'], ['Chandrian', 38], ['Ghosts', 12], ['Ghouls', 6], ['UFOs', 44], ['Vampires', 28], ['Zombies', 88] ]); var options = { legend: 'none', colors: ['#760946'], vAxis: { gridlines: { count: 4 } } }; var chart = new google.visualization.LineChart(document.getElementById('line-chart')); chart.draw(data, options); } </script>
<html> <head> <style> .chartWithOverlay { position: relative; width: 700px; } .overlay { width: 200px; height: 200px; position: absolute; top: 60px; /* chartArea top */ left: 180px; /* chartArea left */ } </style> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.arrayToDataTable([ ['Threat', 'Attacks'], ['Chandrian', 38], ['Ghosts', 12], ['Ghouls', 6], ['UFOs', 44], ['Vampires', 28], ['Zombies', 88] ]); var options = { legend: 'none', colors: ['#760946'], vAxis: { gridlines: { count: 4 } } }; var chart = new google.visualization.LineChart(document.getElementById('line-chart')); chart.draw(data, options); } </script> </head> <body> <div class="chartWithOverlay"> <div id="line-chart" style="width: 700px; height: 500px;"></div> <div class="overlay"> <div style="font-family:'Arial Black'; font-size: 128px;">88</div> <div style="color: #b44; font-family:'Arial Black'; font-size: 32px; letter-spacing: .21em; margin-top:50px; margin-left:5px;">zombie</div> <div style="color: #444; font-family:'Arial Black'; font-size: 32px; letter-spacing: .15em; margin-top:15px; margin-left:5px;">attacks</div> </div> </div> </body> </html>
データに対するオーバーレイのポジショニング
オーバーレイの最適な位置は、グラフ上のデータの終わりによって異なります。たとえば、データをデータ要素の近くに配置したい場合があります。
たとえば、上のグラフでゾンビ攻撃の件数に注目するとします。これを行うには、行末に怖いゾンビヘッドを配置します。
その方法の一つは、グラフをレンダリングして座標をハードコードすることです。これは機能しますが、グラフのデータが変更されるたびに更新する必要があります。より強固な解決策としては、データ要素が画面上のどこに配置されるかを基準にオーバーレイを配置することが挙げられます。グラフのレンダリングが終了するまで場所がわからないため、ready
イベントをリッスンし(グラフのレンダリング時に呼び出されます)、getXLocation
と getYLocation
を使用してプログラムで座標にアクセスします。
.chartWithMarkerOverlay { position: relative; width: 700px; } .overlay-text { width: 200px; height: 200px; position: absolute; top: 50px; /* chartArea top */ left: 200px; /* chartArea left */ } .overlay-marker { width: 50px; height: 50px; position: absolute; top: 53px; /* chartArea top */ left: 528px; /* chartArea left */ }
<div class="chartWithMarkerOverlay"> <div id="line-chart-marker" style="width: 700px; height: 500px;"></div> <div class="overlay-text"> <div style="font-family:'Arial Black'; font-size: 128px;">88</div> <div style="color: #b44; font-family:'Arial Black'; font-size: 32px; letter-spacing: .21em; margin-top:50px; margin-left:5px;">zombie</div> <div style="color: #444; font-family:'Arial Black'; font-size: 32px; letter-spacing: .15em; margin-top:15px; margin-left:5px;">attacks</div> </div> <div class="overlay-marker"> <img src="https://developers.google.com/chart/interactive/images/zombie_150.png" height="50"> </div> </div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.arrayToDataTable([ ['Threat', 'Attacks'], ['Chandrian', 38], ['Ghosts', 12], ['Ghouls', 6], ['UFOs', 44], ['Vampires', 28], ['Zombies', 88] ]); var options = { legend: 'none', colors: ['#760946'], lineWidth: 4, vAxis: { gridlines: { count: 4 } } }; function placeMarker(dataTable) { var cli = this.getChartLayoutInterface(); var chartArea = cli.getChartAreaBoundingBox(); // "Zombies" is element #5. document.querySelector('.overlay-marker').style.top = Math.floor(cli.getYLocation(dataTable.getValue(5, 1))) - 50 + "px"; document.querySelector('.overlay-marker').style.left = Math.floor(cli.getXLocation(5)) - 10 + "px"; }; var chart = new google.visualization.LineChart(document.getElementById('line-chart-marker')); google.visualization.events.addListener(chart, 'ready', placeMarker.bind(chart, data)); chart.draw(data, options); } </script>
<html> <head> <style> .chartWithMarkerOverlay { position: relative; width: 700px; } .overlay-text { width: 200px; height: 200px; position: absolute; top: 50px; /* chartArea top */ left: 200px; /* chartArea left */ } .overlay-marker { width: 50px; height: 50px; position: absolute; top: 53px; /* chartArea top */ left: 528px; /* chartArea left */ } </style> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.arrayToDataTable([ ['Threat', 'Attacks'], ['Chandrian', 38], ['Ghosts', 12], ['Ghouls', 6], ['UFOs', 44], ['Vampires', 28], ['Zombies', 88] ]); var options = { legend: 'none', colors: ['#760946'], lineWidth: 4, vAxis: { gridlines: { count: 4 } } }; function placeMarker(dataTable) { var cli = this.getChartLayoutInterface(); var chartArea = cli.getChartAreaBoundingBox(); // "Zombies" is element #5. document.querySelector('.overlay-marker').style.top = Math.floor(cli.getYLocation(dataTable.getValue(5, 1))) - 50 + "px"; document.querySelector('.overlay-marker').style.left = Math.floor(cli.getXLocation(5)) - 10 + "px"; }; var chart = new google.visualization.LineChart(document.getElementById('line-chart-marker')); google.visualization.events.addListener(chart, 'ready', placeMarker.bind(chart, data)); chart.draw(data, options); } </script> </head> <body> <div class="chartWithMarkerOverlay"> <div id="line-chart-marker" style="width: 700px; height: 500px;"></div> <div class="overlay-text"> <div style="font-family:'Arial Black'; font-size: 128px;">88</div> <div style="color: #b44; font-family:'Arial Black'; font-size: 32px; letter-spacing: .21em; margin-top:50px; margin-left:5px;">zombie</div> <div style="color: #444; font-family:'Arial Black'; font-size: 32px; letter-spacing: .15em; margin-top:15px; margin-left:5px;">attacks</div> </div> <div class="overlay-marker"> <img src="https://developers.google.com/chart/interactive/images/zombie_150.png" height="50"> </div> </div> </body> </html>