Trendlinien

  1. Overview
  2. Lineare Trendlinien
  3. Exponentielle Trendlinien
  4. Polynom-Trendlinien
  5. Farbe ändern
  6. Deckkraft und Linienbreite ändern
  7. Punkte sichtbar machen
  8. Beschriftung ändern
  9. Korrelationen

Übersicht

Eine Trendlinie ist eine Linie, die ein Diagramm überlagert und die allgemeine Tendenz der Daten zeigt. Mit Google-Diagrammen können automatisch Trendlinien für Streudiagramme, Balkendiagramme, Säulendiagramme und Liniendiagramme generiert werden.

Google Charts unterstützt drei Arten von Trendlinien: linear, polynom und exponentiell.

Lineare Trendlinien

Eine lineare Trendlinie ist eine gerade Linie, die sich den Daten im Diagramm so weit wie möglich annähert. Genau genommen ist sie die Linie, die die Summe der quadrierten Abstände von jedem Punkt zu ihr minimiert.

Im folgenden Diagramm sehen Sie auf einem Streudiagramm eine lineare Trendlinie, die das Alter von Zuckerahornsteinen mit dem Durchmesser ihrer Stämme vergleicht. Wenn Sie den Mauszeiger auf die Trendlinie bewegen, wird die von Google Charts berechnete Gleichung angezeigt: 4,885-facher Durchmesser + 0,730.

Wenn Sie in einem Diagramm eine Trendlinie zeichnen möchten, verwenden Sie die Option trendlines und geben Sie an, welche Datenreihen verwendet werden sollen: 

google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Diameter', 'Age'],
    [8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);

  var options = {
    title: 'Age of sugar maples vs. trunk diameter, in inches',
    hAxis: {title: 'Diameter'},
    vAxis: {title: 'Age'},
    legend: 'none',
    trendlines: { 0: {} }    // Draw a trendline for data series 0.
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

Lineare Trendlinien sind der häufigste Trendlinientyp. Manchmal ist eine Kurve jedoch am besten zur Beschreibung von Daten geeignet. Dafür ist eine andere Trendlinie erforderlich.

Exponentielle Trendlinien

Wenn sich Ihre Daten am besten anhand eines Exponentials in der Form eax+b erklären lassen, können Sie mit dem Attribut type eine exponentielle Trendlinie angeben:

Hinweis:Im Gegensatz zu linearen Trendlinien gibt es verschiedene Möglichkeiten, exponentielle Trendlinien zu berechnen. Derzeit gibt es nur eine Methode, aber in Zukunft werden weitere unterstützt. Daher ist es möglich, dass sich der Name oder das Verhalten der aktuellen exponentiellen Trendlinie ändert.

Für dieses Diagramm verwenden wir auch visibleInLegend: true, um die Exponentialkurve in der Legende darzustellen.

google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Generation', 'Descendants'],
    [0, 1], [1, 33], [2, 269], [3, 2013]
 ]);

  var options = {
    title: 'Descendants by Generation',
    hAxis: {title: 'Generation', minValue: 0, maxValue: 3},
    vAxis: {title: 'Descendants', minValue: 0, maxValue: 2100},
    trendlines: {
      0: {
        type: 'exponential',
        visibleInLegend: true,
      }
    }
  };

  var chart = new google.visualization.ScatterChart(document.getElementById('chart_div2'));
  chart.draw(data, options);
}

Farbe ändern

Standardmäßig sind Trendlinien genauso eingefärbt wie die Datenreihen, aber heller. Sie können dies mit dem Attribut color überschreiben. Hier wird dargestellt, wie viele Ziffern von genau pro Jahr während eines rechenintensiven Zeitraums berechnet wurden. Die exponentielle Trendlinie wird grün dargestellt.

Hier ist die Spezifikation für Trendlinien:

    trendlines: {
      0: {
        type: 'exponential',
        color: 'green',
      }
    }

Polynom-Trendlinien

Geben Sie zum Generieren einer polynomen Trendlinie den Typ polynomial und degree an. Verwenden Sie diese Option mit Vorsicht, da sie manchmal zu irreführenden Ergebnissen führen können. Im folgenden Beispiel wird ein ungefähr linearer Datensatz mit einer kubischen Trendlinie (Grad 3) dargestellt:

Beachten Sie, dass das Absinken nach dem letzten Datenpunkt nur sichtbar ist, weil wir die horizontale Achse künstlich auf 15 verlängert haben. Ohne das Festlegen von hAxis.maxValue auf 15 würde das Ergebnis so aussehen:

Dieselben Daten, dasselbe Polynom, ein anderes Fenster in den Daten.

Optionen
  var options = {
    title: 'Age vs. Weight comparison',
    legend: 'none',
    crosshair: { trigger: "both", orientation: "both" },
    trendlines: {
      0: {
        type: 'polynomial',
        degree: 3,
        visibleInLegend: true,
      }
    }
  };
Vollständiges HTML
<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 = google.visualization.arrayToDataTable([
         ['Age', 'Weight'],
         [ 8,      12],
         [ 4,      5.5],
         [ 11,     14],
         [ 4,      5],
         [ 3,      3.5],
         [ 6.5,    7]
       ]);

       var options = {
         title: 'Age vs. Weight comparison',
         legend: 'none',
         crosshair: { trigger: 'both', orientation: 'both' },
         trendlines: {
           0: {
             type: 'polynomial',
             degree: 3,
             visibleInLegend: true,
           }
         }
       };

       var chart = new google.visualization.ScatterChart(document.getElementById('polynomial2_div'));
       chart.draw(data, options);
     }
   </script>
 </head>
 <body>
  <div id='polynomial2_div' style='width: 900px; height: 500px;'></div>
 </body>
</html>

Deckkraft und Linienbreite ändern

Sie können die Transparenz der Trendlinie ändern, indem Sie für opacity einen Wert zwischen 0,0 und 1,0 festlegen. Für die Linienbreite legen Sie die Option lineWidth fest.

    trendlines: {
      0: {
        color: 'purple',
        lineWidth: 10,
        opacity: 0.2,
        type: 'exponential'
      }
    }

Die Option lineWidth ist für die meisten Anwendungsfälle ausreichend. Wenn Ihnen das Design gefällt, können Sie mit der Option pointSize die Größe der auswählbaren Punkte innerhalb der Trendlinie anpassen:

So wie Licht sowohl eine Welle als auch ein Partikel ist, ist eine Trendlinie sowohl eine Linie als auch ein Bündel von Punkten. Was Nutzern angezeigt wird, hängt davon ab, wie sie damit interagieren: Normalerweise ist eine Linie eine Linie, aber wenn sie den Mauszeiger auf die Trendlinie bewegen, wird ein bestimmter Punkt hervorgehoben. Dieser Punkt hat einen Durchmesser von:

  • Trendlinie pointSize, falls definiert, sonst...
  • Den globalen pointSize, falls definiert, sonst...
  • 7

Wenn Sie jedoch entweder die globale Option oder die Trendlinienoption pointSize festlegen, werden alle auswählbaren Punkte angezeigt, unabhängig vom lineWidth der Trendlinie.

Optionen
  var options = {
    legend: 'none',
    hAxis: { ticks: [] },
    vAxis: { ticks: [] },
    pointShape: 'diamond',
    trendlines: {
      0: {
        type: 'polynomial',
        degree: 3,
        visibleInLegend: true,
        pointSize: 20, // Set the size of the trendline dots.
	opacity: 0.1
      }
    }
  };
Vollständiges HTML
<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 = google.visualization.arrayToDataTable([
          ['X', 'Y'],
          [0, 4],
          [1, 2],
          [2, 4],
          [3, 6],
          [4, 4]
        ]);

        var options = {
          legend: 'none',
          hAxis: { ticks: [] },
          vAxis: { ticks: [] },
          colors: ['#703583'],
          pointShape: 'diamond',
          trendlines: {
            0: {
              type: 'polynomial',
              degree: 3,
              visibleInLegend: true,
              pointSize: 20, // Set the size of the trendline dots.
              opacity: 0.1
            }
          }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('chart_pointSize'));

      chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="chart_pointSize" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Punkte sichtbar machen

Trendlinien werden dadurch dargestellt, dass mehrere Punkte in das Diagramm eingetragen werden. Mit der Option pointsVisible der Trendlinie legen Sie fest, ob die Punkte einer bestimmten Trendlinie sichtbar sind. Die Standardoption für alle Trendlinien ist true. Wenn Sie jedoch die Sichtbarkeit der Punkte für die erste Trendlinie deaktivieren möchten, legen Sie trendlines.0.pointsVisible: false fest.

Im folgenden Diagramm sehen Sie, wie die Sichtbarkeit von Punkten für jede Trendlinie gesteuert wird.

Optionen
        var options = {
          height: 500,
          legend: 'none',
          colors: ['#9575cd', '#33ac71'],
          pointShape: 'diamond',
          trendlines: {
            0: {
              type: 'exponential',
              pointSize: 20,
              opacity: 0.6,
              pointsVisible: false
            },
            1: {
              type: 'linear',
              pointSize: 10,
              pointsVisible: true
            }
          }
        };
Vollständiges HTML-Format
<html>
  <head>
    <meta charset="utf-8"/>
    <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 = google.visualization.arrayToDataTable([
          ['X', 'Y', 'Z'],
          [0, 4, 5],
          [1, 2, 6],
          [2, 4, 8],
          [3, 6, 10],
          [4, 4, 11],
          [5, 8, 13],
          [6, 12, 15],
          [7, 15, 19],
          [8, 25, 21],
          [9, 34, 23],
          [10, 50, 27]
        ]);

        var options = {
          height: 500,
          legend: 'none',
          colors: ['#9575cd', '#33ac71'],
          pointShape: 'diamond',
          trendlines: {
            0: {
              type: 'exponential',
              pointSize: 20,
              opacity: 0.6,
              pointsVisible: false
            },
            1: {
              type: 'linear',
              pointSize: 10,
              pointsVisible: true
            }
          }
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Label ändern

Wenn Sie visibleInLegend auswählen, zeigt das Label standardmäßig die Gleichung der Trendlinie an. Mit labelInLegend können Sie ein anderes Label angeben. Hier zeigen wir eine Trendlinie für jede der beiden Reihen an und setzen die Labels in der Legende auf „Fehlerzeile“ (für Serie 0) und „Testzeile“ (Serie 1).

    trendlines: {
      0: {
        labelInLegend: 'Bug line',
        visibleInLegend: true,
      },
      1: {
        labelInLegend: 'Test line',
        visibleInLegend: true,
      }
    }

Korrelationen

Der Bestimmtheitskoeffizient, in der Statistik als R2 bezeichnet, gibt an, wie genau eine Trendlinie mit den Daten übereinstimmt. Eine perfekte Korrelation ist 1,0 und eine perfekte Antikorrelation ist 0,0.

Sie können R2 in der Legende Ihres Diagramms darstellen, indem Sie die Option showR2 auf true setzen.

 
<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 = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          hAxis: {minValue: 0, maxValue: 15},
          vAxis: {minValue: 0, maxValue: 15},
          chartArea: {width:'50%'},
          trendlines: {
            0: {
              type: 'linear',
              showR2: true,
              visibleInLegend: true
            }
          }
        };

        var chartLinear = new google.visualization.ScatterChart(document.getElementById('chartLinear'));
        chartLinear.draw(data, options);

        options.trendlines[0].type = 'exponential';
        options.colors = ['#6F9654'];

        var chartExponential = new google.visualization.ScatterChart(document.getElementById('chartExponential'));
        chartExponential.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chartLinear" style="height: 350px; width: 800px"></div>
    <div id="chartExponential" style="height: 350px; width: 800px"></div>
  </body>
</html>