Fadenkreuz

  1. Overview
  2. Ein einfaches Beispiel
  3. Fadenkreuz-Optionen

Überblick

Fadenkreuze sind dünne vertikale und horizontale Linien, die auf einem Datenpunkt in einem Diagramm zentriert sind. Wenn Sie als Diagrammersteller Fadenkreuze in Ihren Diagrammen aktivieren, können Ihre Nutzer ein einzelnes Element als Ziel verwenden:

Fadenkreuze können im Fokus, auf der Auswahl oder auf beidem angezeigt werden. Sie sind für Streudiagramme, Liniendiagramme, Flächendiagramme sowie für die Linien- und Flächenabschnitte von Kombinationsdiagrammen verfügbar.

Ein einfaches Beispiel

Bewegen Sie die Maus über die Punkte unten oder wählen Sie sie aus, um Fadenkreuze anzuzeigen:

Hier sehen Sie eine vollständige Webseite, auf der das obige Diagramm erstellt wird, wobei die Linie für Fadenkreuze fett dargestellt ist:

<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-Optionen

Die folgenden Fadenkreuz-Optionen sind verfügbar:

crosshair: { trigger: 'both' } sowohl auf Fokus als auch auf Auswahl
crosshair: { trigger: 'focus' } Nur im Fokus anzeigen
crosshair: { trigger: 'selection' } Nur auf Auswahl anzeigen
crosshair: { orientation: 'both' } Darstellung von horizontalen und vertikalen Haaren
crosshair: { orientation: 'horizontal' } Nur horizontale Haare anzeigen
crosshair: { orientation: 'vertical' } Nur vertikal verlaufende Haare anzeigen
crosshair: { color: color_string } Legen Sie die Fadenkreuzfarbe auf color_string fest, 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 im Fokus auf color_string setzen
crosshair: { focused: { opacity: opacity_number } } Fadenkreuz-Deckkraft im Fokus auf opacity_number festlegen
crosshair: { selected: { color: color_string } } Fadenkreuzfarbe bei Auswahl auf color_string festlegen
crosshair: { selected: { opacity: opacity_number } } Fadenkreuz-Deckkraft bei Auswahl auf opacity_number festlegen