Übersicht
Eine
Google Charts unterstützt drei Arten von Trendlinien: linear, polynom und exponentiell.
Lineare Trendlinien
Eine
Im Diagramm unten sehen Sie eine lineare Trendlinie in einem Streudiagramm, in der das Alter des Zuckerahorns mit dem Durchmesser seiner Baumstämme verglichen wird. Wenn Sie den Mauszeiger auf die Trendlinie bewegen, wird die von Google Charts berechnete Gleichung angezeigt: 4,885-mal Durchmesser + 0,730.
Wenn Sie eine Trendlinie in einem Diagramm zeichnen möchten, verwenden Sie die Option trendlines und geben Sie an, welche Datenreihe verwendet werden soll:
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 die am häufigsten verwendete Art von Trendlinien. Aber manchmal eignet sich eine Kurve am besten, um Daten zu beschreiben. Dazu benötigen wir eine andere Art von Trendlinie.
Exponentielle Trendlinien
Wenn sich Ihre Daten am besten anhand eines Exponentials im Format eax + b erklären lassen, können Sie mit dem Attribut type eine
Hinweis:Im Gegensatz zu linearen Trendlinien gibt es mehrere Möglichkeiten, exponentielle Trendlinien zu berechnen. Wir bieten derzeit nur eine Methode, unterstützen jedoch zukünftig mehr. Daher kann sich der Name oder das Verhalten der aktuellen exponentiellen Trendlinie ändern.
Für dieses Diagramm verwenden wir auch visibleInLegend: true, um die exponentielle Kurve in der Legende anzuzeigen.
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 die gleichen Farben wie bei den Datenreihen, aber heller. Sie können dies mit dem Attribut color überschreiben.
Hier wird die Anzahl der π-Zahlen pro Jahr während einer rechenfruchtbaren Zeit dargestellt, wobei die exponentielle Trendlinie grün dargestellt wird.
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 mit Vorsicht, da sie manchmal zu irreführenden Ergebnissen führen können. Im folgenden Beispiel wird ein ungefähr lineares Dataset mit einer kubischen Trendlinie (3) dargestellt:
Die Umrandung nach dem letzten Datenpunkt ist nur sichtbar, weil wir die horizontale Achse künstlich auf 15 verlängert haben. Ohne den Wert von hAxis.maxValue auf 15 sähe Folgendes aus:
Dieselben Daten, dasselbe Polynom und unterschiedliches Fenster für die Daten.
var options = {
title: 'Age vs. Weight comparison',
legend: 'none',
crosshair: { trigger: "both", orientation: "both" },
trendlines: {
0: {
type: 'polynomial',
degree: 3,
visibleInLegend: true,
}
}
};
<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. Legen Sie dazu opacity auf einen Wert zwischen 0,0 und 1,0 und die Linienbreite mit der Option lineWidth fest.
trendlines: {
0: {
color: 'purple',
lineWidth: 10,
opacity: 0.2,
type: 'exponential'
}
}
Die Option lineWidth ist für die meisten Verwendungszwecke ausreichend. Wenn Ihnen der Look gefällt, gibt es jedoch die Option pointSize, mit der Sie die Größe der auswählbaren Punkte innerhalb der Trendlinie anpassen können:
Genau wie das Licht ist eine Welle und ein Partikel, eine Trendlinie, eine Linie und mehrere Punkte. Was Nutzern angezeigt wird, hängt davon ab, wie sie damit interagieren: Normalerweise wird eine Linie eingeblendet. Wird der Mauszeiger jedoch auf die Trendlinie bewegt, wird ein bestimmter Punkt hervorgehoben. Dieser Punkt hat einen Durchmesser gleich:
- die Trendlinie
pointSize, falls definiert, andernfalls... - die globale
pointSize, falls definiert, sonst... - 7
Wenn Sie jedoch entweder die globale oder die Trendlinien-pointSize-Option festlegen, werden alle auswählbaren Punkte angezeigt, unabhängig von der lineWidth der Trendlinie.
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
}
}
};
<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 durch das Stempeln mehrerer Punkte im Diagramm ergänzt. Die Option pointsVisible der Trendlinie bestimmt, ob die Punkte für eine bestimmte Trendlinie sichtbar sind. Die Standardoption für alle Trendlinien ist true. Wenn Sie die Sichtbarkeit eines Punkts für die erste Trendlinie deaktivieren möchten, legen Sie trendlines.0.pointsVisible: false fest.
Das folgende Diagramm zeigt, wie die Sichtbarkeit von Punkten pro Trendlinie gesteuert wird.
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
}
}
};
<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. Sie können labelInLegend verwenden, um ein anderes Label anzugeben. Hier wird für jede der beiden Reihen eine Trendlinie angezeigt. Dabei werden die Labels in der Legende auf „Fehlerlinie“ (für Reihe 0) und „Testzeile“ (Serie 1) gesetzt.
trendlines: {
0: {
labelInLegend: 'Bug line',
visibleInLegend: true,
},
1: {
labelInLegend: 'Test line',
visibleInLegend: true,
}
}
Korrelationen
Der Bestimmtheitscode, in den Statistiken R 2 genannt, gibt an, wie eng eine Trendlinie den Daten entspricht. Eine perfekte Korrelation ist 1, 0 und eine perfekte Korrelation.
Sie können R2 in der Legende des Diagramms darstellen lassen. Setzen Sie dazu die Option showR2 auf true.
<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>