簡介
「重疊」是顯示在 Google 圖表頂端的區域,通常用來指出特定的統計資料,但也可以是任何所需,因為它只是 HTML 和 CSS。
簡易的做法是建立 CSS 類別,然後直接在 HTML 中參照該類別,不必使用 JavaScript。更進階的用途可能會使用 Google 圖表自訂疊加層的位置和內容。
簡易範例
在第一個例子中,我們會完全避免使用 JavaScript,只是直接在折線圖中重疊部分文字:
這裡的內部樣式表定義了兩個類別,我們稱之為 chartWithOverlay
和 overlay
。請注意,我們會使用 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>