Omówienie
Wykresy Google obsługują 3 typy linii trendu: liniowy, wielomianowy i wykładniczy.
Liniowe linie trendu
Na wykresie poniżej widać liniową linię trendu na wykresie punktowym porównującym wiek klonów cukrowych z średnicą ich pni. Po najechaniu kursorem na linię trendu zobaczysz równanie obliczone przez Wykresy Google: 4,885 pomnożone przez średnicę + 0,730.
Aby narysować linię trendu na wykresie, użyj opcji trendlines i określ, której serii danych chcesz użyć:
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);
}
Liniowe linie trendu to najpopularniejszy typ linii trendu. Czasami jednak do opisywania danych najlepiej nadaje się krzywa. Do tego potrzebujemy innego rodzaju linii trendu.
Wykładnicze linie trendu
Jeśli dobrze objaśnisz dane za pomocą funkcji wykładniczej postaci eax+b, możesz użyć atrybutu type do określenia
Uwaga: w przeciwieństwie do liniowych linii trendu istnieje kilka różnych sposobów obliczania wykładniczych linii trendu. W tej chwili udostępniamy tylko jedną metodę, ale w przyszłości będziemy obsługiwać więcej, dlatego może się zmienić nazwa lub działanie bieżącej wykładniczej linii trendu.
W tym wykresie używamy też funkcji visibleInLegend: true do wyświetlania
krzywej wykładniczej w legendzie.
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);
}
Zmienianie koloru
Domyślnie linie trendu mają taki sam kolor jak seria danych, ale jaśniejszy. Możesz zastąpić to za pomocą atrybutu color.
Tutaj przedstawiamy, ile cyfr liczby π zostało obliczonych w roku w okresie rentowności obliczeniowej. Kolorem linii trendu wykładniczego jest kolor zielony.
Specyfikacja linii trendu:
trendlines: {
0: {
type: 'exponential',
color: 'green',
}
}
Wielomianowe linie trendu
Aby wygenerować wielomianową linię trendu, podaj typ polynomial i degree. Używaj ich z rozwagą, bo czasami mogą one prowadzić do wyników wprowadzających w błąd. W poniższym przykładzie prezentujemy przybliżony liniowy zbiór danych z sześcienną linią trendu (stopień 3):
Pamiętaj, że słupek za ostatnim punktem danych jest widoczny tylko dlatego, że sztucznie wydłużyliśmy oś poziomą do 15. Bez ustawienia hAxis.maxValue na 15 wyglądało to tak:
Te same dane, ten sam wielomian, różne okno danych.
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>
Zmienianie przezroczystości i szerokości linii
Aby zmienić przezroczystość linii trendu, ustaw opacity na wartość od 0,0 do 1,0, a szerokość linii – opcję lineWidth.
trendlines: {
0: {
color: 'purple',
lineWidth: 10,
opacity: 0.2,
type: 'exponential'
}
}
Opcja lineWidth sprawdzi się w większości zastosowań, ale jeśli podoba Ci się wygląd, możesz skorzystać z opcji pointSize, która pozwala dostosować rozmiar kropek do wyboru na linii trendu:
Światło jest zarówno falą, jak i cząsteczką, a linia trendu to zarówno linia, jak i grupa punktów. To, co widzą użytkownicy, zależy od sposobu interakcji z nią – zwykle jest to linia, ale gdy najedzie na linię trendu, zostanie wyróżniony konkretny punkt. Punkt ten będzie miał średnicę równą:
- linia trendu
pointSize, jeśli jest określona, a w przeciwnym razie... - globalny
pointSize, jeśli został określony, a w przeciwnym razie... - 7
Jeśli jednak ustawisz opcję pointSize lub linię trendu, wyświetlą się wszystkie punkty do wyboru, niezależnie od linii trendu lineWidth.
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>
Jak zapewnić widoczność punktów
Linie trendu tworzy się przez dodanie kilku kropek na wykresie. Opcja pointsVisible linii trendu określa, czy punkty na danej linii trendu są widoczne. Domyślna opcja dla wszystkich linii trendu to true, ale jeśli chcesz wyłączyć widoczność punktu dla pierwszej linii trendu, ustaw trendlines.0.pointsVisible: false.
Wykres poniżej pokazuje, jak kontrolować widoczność punktów w poszczególnych liniach trendu.
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>
Zmienianie etykiety
Domyślnie, jeśli wybierzesz visibleInLegend, etykieta pokazuje równanie linii trendu. Aby wskazać inną etykietę, możesz użyć elementu labelInLegend. Tutaj wyświetlamy linię trendu dla każdej z dwóch serii, ustawiając etykiety w legendzie na „Linia błędu” (dla serii 0) i „Linia testowa” (seria 1).
trendlines: {
0: {
labelInLegend: 'Bug line',
visibleInLegend: true,
},
1: {
labelInLegend: 'Test line',
visibleInLegend: true,
}
}
Korelacje
Współczynnik determinacji, nazywany w statystykach R2, wskazuje stopień dopasowania linii trendu do danych. Idealna korelacja to 1,0, a idealna antykorelacja to 0,0.
Symbol R2 możesz umieścić w legendzie wykresu, ustawiając opcję showR2 na 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>