Présentation
Les réticules sont de fines lignes verticales et horizontales centrées sur un point de données d'un graphique. Lorsque vous, en tant que créateur de graphiques, activez le curseur en forme de croix dans vos graphiques, vos utilisateurs peuvent ensuite cibler un seul élément:
Le curseur en forme de croix peut apparaître sur la mise au point, la sélection ou les deux. Elles sont disponibles pour les graphiques à nuage de points, les graphiques en courbes et les graphiques en aires, ainsi que pour les portions de ligne et d'aire des graphiques combinés.
Exemple simple
Pointez sur les points ci-dessous ou sélectionnez-les pour afficher le curseur en forme de croix:
Voici une page Web complète qui crée le graphique ci-dessus, avec une ligne en forme de croix en gras:
<html>
<head>
<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.DataTable();
data.addColumn('number');
data.addColumn('number');
for (var i = 0; i < 100; i++)
data.addRow([Math.floor(Math.random()*100),
Math.floor(Math.random()*100)]);
var options = {
legend: 'none',
crosshair: { trigger: 'both' } // Display crosshairs on focus and selection.
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Options en forme de réticule
Les options en forme de croix suivantes sont disponibles:
crosshair: { trigger: 'both' } | afficher à la fois la mise au point et la sélection |
crosshair: { trigger: 'focus' } | afficher uniquement sur la mise au point |
crosshair: { trigger: 'selection' } | afficher sur la sélection uniquement |
crosshair: { orientation: 'both' } | afficher à la fois les poils horizontaux et verticaux |
crosshair: { orientation: 'horizontal' } | afficher uniquement les poils horizontaux |
crosshair: { orientation: 'vertical' } | afficher uniquement les poils verticaux |
crosshair: { color: color_string } | Définissez la couleur en croix sur color_string (par exemple, 'red' ou '#f00' |
crosshair: { opacity: opacity_number } | Définissez l'opacité en réticule sur opacity_number, où 0.0 est totalement transparent et 1.0 complètement opaque. |
crosshair: { focused: { color: color_string } } | définir la couleur en forme de croix sur color_string sur l'élément sélectionné |
crosshair: { focused: { opacity: opacity_number } } | définir l'opacité en réticule sur opacity_number |
crosshair: { selected: { color: color_string } } | définir la couleur en forme de croix sur color_string sur la sélection |
crosshair: { selected: { opacity: opacity_number } } | définir l'opacité croisée sur opacity_number sur la sélection |