Übersicht
Fadenkreuze sind dünne vertikale und horizontale Linien, die auf einen Datenpunkt in einem Diagramm zentriert sind. Wenn Sie als Diagrammersteller in Ihren Diagrammen Fadenkreuze aktivieren, können Ihre Nutzer ein einzelnes Element als Ziel verwenden:
Fadenkreuze können fokussiert, ausgewählt oder beides sein. Sie sind für Streudiagramme, Liniendiagramme und Flächendiagramme sowie für Linien- und Flächenteile von Kombinationsdiagrammen verfügbar.
Ein einfaches Beispiel
Bewegen Sie den Mauszeiger auf die Punkte unten oder wählen Sie sie aus, um ein Fadenkreuz aufzurufen:
Hier sehen Sie eine Webseite, auf der das obige Diagramm erstellt wird, wobei die Fadenkreuze in Fettschrift dargestellt sind:
<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>
Fadenkreuz
Folgende Fadenkreuze sind verfügbar:
crosshair: { trigger: 'both' } | Fokus und Auswahl anzeigen |
crosshair: { trigger: 'focus' } | Nur im Fokus anzeigen |
crosshair: { trigger: 'selection' } | Nur bei Auswahl anzeigen |
crosshair: { orientation: 'both' } | Horizontale und vertikale Haare anzeigen |
crosshair: { orientation: 'horizontal' } | Nur horizontale Haare anzeigen |
crosshair: { orientation: 'vertical' } | Nur vertikale Haare anzeigen |
crosshair: { color: color_string } | Fadenkreuzfarbe festlegen auf color_string (z.B. 'red' oder '#f00' |
crosshair: { opacity: opacity_number } | Fadenkreuzdeckkraft auf opacity_number festlegen, wobei 0.0 vollständig transparent und 1.0 vollständig deckend ist |
crosshair: { focused: { color: color_string } } | Fadenkreuzfarbe festlegen auf color_string im Fokus |
crosshair: { focused: { opacity: opacity_number } } | Fadenkreuzdeckkraft auf opacity_number im Fokus festlegen |
crosshair: { selected: { color: color_string } } | Fadenkreuzfarbe bei Auswahl auf color_string setzen |
crosshair: { selected: { opacity: opacity_number } } | Fadenkreuzdeckkraft bei Auswahl auf opacity_number festlegen |