Panoramica
Un overlay è un'area situata sopra un grafico Google. Viene in genere utilizzata per richiamare un dato specifico, ma può essere qualsiasi cosa desiderata, dato che è solo HTML e CSS.
Per utilizzi semplici, devi creare una classe CSS e fare riferimento alla classe nel tuo codice HTML, senza usare JavaScript. Gli utilizzi più avanzati possono comportare l'utilizzo di grafici Google per personalizzare il posizionamento e i contenuti dell'overlay.
Esempio semplice
Per il nostro primo esempio, eviteremo completamente JavaScript e sovrapporremo semplicemente del testo a un grafico a linee:
Qui, un foglio di stile interno definisce due classi che chiamiamo chartWithOverlay e overlay. Tieni presente che utilizziamo il posizionamento relativo in chartWithOverlay e il posizionamento assoluto in overlay.
Poi, nel corpo della pagina web, utilizziamo chartWithOverlay come contenitore in cui posizioniamo il grafico (line-chart) e poi 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>
Posizionamento di overlay in base ai dati
A volte la posizione migliore per un overlay dipende da dove finiscono i dati sul grafico. Ad esempio, potresti voler inserire un'immagine vicino a un elemento di dati.
Poniamo che tu voglia attirare l'attenzione sul numero di attacchi di zombi nel grafico sopra. Lo facciamo posizionando una testata di zombi spaventosa alla fine della riga.
Un modo per farlo è eseguire il rendering del grafico e aggiungere le hardcoded alle nostre coordinate. Funzionerà, ma richiederebbe un aggiornamento ogni volta che i dati del grafico cambiano. Una soluzione più affidabile ci permette di posizionare l'overlay rispetto a qualsiasi punto in cui l'elemento di dati venga visualizzato sullo schermo. Poiché non possiamo sapere dove sarà disponibile fino al termine del rendering del grafico, ascolteremo l'evento ready (chiamato al termine del rendering) e accederemo alle coordinate in modo programmatico con getXLocation e 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>