Omówienie
Wykresy Google obsługują trzy typy linii: liniowe, wielomianowe i wykładnicze.
Liniowe linie trendu
Na wykresie poniżej widać liniową linię trendu na wykresie punktowym, który porównuje wiek klonów cukru ze średnicą ich trąb. Możesz najechać kursorem na linię trendu, aby zobaczyć równanie obliczone przez Wykresy Google: 4,885 razy ś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); }
Liniowy trend jest najpopularniejszym typem linii trendu. Czasami jednak krzywa najlepiej nadaje się do opisywania danych, do tego potrzebna jest inna linia trendu.
Wykładnicze linie trendu
Jeśli dane są najlepiej wyjaśnione przez wykładnik eaks+b, możesz użyć atrybutu type
do określenia linii trendu
Uwaga: w przeciwieństwie do liniowych linii trendu dane można obliczać w postaci wykładniczej. Obecnie udostępniamy tylko jedną metodę, ale w przyszłości będziemy obsługiwać jej więcej. Możliwe, że nazwa lub zachowanie aktualnej wykładniczej linii zmienią się.
W przypadku tego wykresu również pokazujemy krzywą wykładniczą visibleInLegend: true
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); }
Zmiana koloru
Domyślnie linie trendu mają te same kolory co seria danych, ale są jaśniejsze. Możesz zastąpić te dane za pomocą atrybutu color
.
Tutaj podajemy wykres z liczbą iloczynu SOC w roku obliczonym na podstawie owoców obliczeniowych i kolorowym zielonym trendem.
Oto specyfikacja linii trendu:
trendlines: { 0: { type: 'exponential', color: 'green', } }
Wielomianowe linie trendu
Aby wygenerować wielomianową linię trendu, określ typ polynomial
i degree
. Należy zachować ostrożność, ponieważ czasami mogą one wprowadzać w błąd. W poniższym przykładzie wykres mniej więcej liniowy jest na wykresie sześcienny (stopień 3):
Pamiętaj, że spadek po ostatnim punkcie danych jest widoczny tylko dlatego, że sztucznie wydłużyliśmy oś poziomą do 15. Bez ustawienia hAxis.maxValue na 15 wygląda to tak:
Te same dane, wiele wielomianów, różne okna 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
Przezroczystość linii trendu możesz zmienić, ustawiając opacity
na wartość od 0,0 do 1,0, a szerokość linii – wybierając opcję lineWidth
.
trendlines: { 0: { color: 'purple', lineWidth: 10, opacity: 0.2, type: 'exponential' } }
Opcja lineWidth
będzie wystarczająca w przypadku większości zastosowań, ale jeśli podoba Ci się wygląd, możesz użyć opcji pointSize
, która pozwala dostosować rozmiar wybieranych kropek na linii trendu:
Podobnie jak światło to fala i cząstka, linia trendu to zarówno linia, jak i grupa punktów. To, co widzą użytkownicy, zależy od sposobu interakcji z nim. Zwykle są to linie, ale po najechaniu kursorem na linię trend jest wyróżniony. Średnica punktu ma tę wartość:
- linia trendu
pointSize
(jeśli została zdefiniowana), w przeciwnym razie... - globalny
pointSize
(jeśli został zdefiniowany), w przeciwnym razie... - 7
Jeśli jednak ustawisz opcję globalnej lub trendu pointSize
, wyświetlą się wszystkie możliwe do wybrania punkty, niezależnie od wartości 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>
Wyświetlanie punktów
Linie trendów są badane przez oznaczenie kropki na wykresie. Opcja pointsVisible
linii trendu określa, czy punkty dla danej linii trendu są widoczne. Domyślnym ustawieniem dla wszystkich linii trendu jest true
. Jeśli chcesz wyłączyć widoczność punktów w pierwszej linii trendu, ustaw trendlines.0.pointsVisible: false
.
Wykres poniżej przedstawia widoczność punktów w każdej linii 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>
Zmiana etykiety
Domyślnie, jeśli wybierzesz visibleInLegend
, etykieta wyświetli równanie linii trendu. Aby określić inną etykietę, możesz użyć labelInLegend
. Tutaj wyświetlana jest linia trendu dla każdej z dwóch serii, ustawiając etykiety na legendach na „Linia błędów” (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 R2 w statystykach, wskazuje stopień dopasowania linii trendu do danych. Idealna korelacja wynosi 1,0, a idealna korelacja to 0,0.
Legenda wykresu może przedstawiać R22, 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>