Présentation
Une superposition est une zone placée au-dessus d'un graphique Google. Il est généralement utilisé pour indiquer une statistique particulière, mais il peut s'agir de n'importe quel élément de votre choix, car il s'agit simplement de code HTML et CSS.
Les utilisations simples impliquent de créer une classe CSS et de s'y référer simplement dans votre code HTML. Aucun JavaScript n'est requis. Des utilisations plus avancées peuvent impliquer l'utilisation de Google Charts pour personnaliser le positionnement et le contenu de la superposition.
Exemple simple
Pour notre premier exemple, nous allons éviter complètement JavaScript et simplement superposer du texte sur un graphique en courbes:
Ici, une feuille de style interne définit deux classes appelées chartWithOverlay et overlay. Notez que nous utilisons le positionnement relatif dans chartWithOverlay et le positionnement absolu dans overlay.
Ensuite, dans le corps de notre page Web, nous utilisons un chartWithOverlay comme conteneur dans lequel nous plaçons notre graphique (line-chart), puis notre 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>
Positionnement de superpositions par rapport aux données
Parfois, la meilleure position pour une superposition dépend de l'endroit où se trouvent les données sur le graphique. Par exemple, nous pouvons vouloir placer une image près d'un élément de données.
Supposons que nous voulions attirer l'attention sur le nombre d'attaques de zombies dans le graphique ci-dessus. Nous allons le faire en plaçant une tête de zombie effrayante au bout de la ligne.
Pour ce faire, vous pouvez afficher le graphique et coder en dur nos coordonnées. Cela fonctionnera, mais vous devrez le mettre à jour chaque fois que les données du graphique changent. Une solution plus robuste consisterait à placer la superposition par rapport à l'endroit où l'élément de données se termine à l'écran. Comme nous ne pouvons pas savoir où cela se trouvera avant la fin du rendu du graphique, nous écouterons l'événement ready (appelé lorsque le rendu du graphique sera terminé) et accéderons aux coordonnées de manière programmatique avec getXLocation et 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>