Fadenkreuz

Ü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