Omówienie
Nakładka to obszar nad wykresem Google. Zwykle służy do wywoływania konkretnych statystyk, ale w dowolnym przypadku może dotyczyć dowolnych form HTML, ponieważ jest to tylko kod HTML i CSS.
Proste zastosowania obejmują tworzenie klasy CSS i odwoływanie się do niej w kodzie HTML bez konieczności obsługi JavaScriptu. Bardziej zaawansowane zastosowania mogą obejmować korzystanie z wykresów Google w celu dostosowania pozycjonowania i treści nakładki.
Prosty przykład
W pierwszym przykładzie unikniemy kodu JavaScript i po prostu nałożymy tekst na wykres liniowy.
W ramach wewnętrznego arkusza stylów definiujemy 2 klasy o nazwach chartWithOverlay
i overlay
. Pamiętaj, że pozycjonowanie względne w chartWithOverlay
i bezwzględne pozycjonowanie w overlay
.
Następnie w treści strony internetowej używamy chartWithOverlay
jako kontenera, w którym umieszczamy wykres (line-chart
) i następnie 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>
Określanie położenia nakładek w odniesieniu do danych
Czasami najlepsze położenie nakładki zależy od miejsca, w którym dane pojawią się na wykresie. Możemy na przykład umieścić obraz w pobliżu elementu danych.
Powiedzmy, że na wykresie powyżej chcemy zwrócić uwagę na liczbę ataków zombie. Zrobimy to, umieszczając strasznego głowę zombie na końcu wiersza.
Jednym z nich jest wyrenderowanie wykresu i zakodowanie na stałe naszych współrzędnych. Będzie to skuteczne, ale wymagałoby to aktualizacji po każdej zmianie danych na wykresie. Bardziej rozbudowane rozwiązanie dałoby nam możliwość nakładania nakładki na miejsce, w którym element danych znajduje się na ekranie. Nie wiemy, gdzie to jest, dopóki wykres nie zostanie wyrenderowany, więc nasłuchujemy zdarzenia ready
(wywoływanego po zakończeniu renderowania) i automatycznie uzyskujemy dostęp do współrzędnych za pomocą getXLocation
i 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>