Linie trendu

Omówienie

Linia trendu to linia nałożona na wykres, który ujawnia ogólny kierunek danych. Wykresy Google automatycznie generują linie trendu dla wykresów rozproszonych, słupkowych, kolumnowych i liniowych.

Wykresy Google obsługują trzy typy linii: liniowe, wielomianowe i wykładnicze.

Liniowe linie trendu

Liniowy wykres trendu to linia liniowa, która najbliżej określa dane na wykresie. (Dokładnie mówiąc, jest to linia minimalizująca sumę odległości do kwadratu do każdego punktu).

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 wykładni w następujący sposób:

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.

Opcje
  var options = {
    title: 'Age vs. Weight comparison',
    legend: 'none',
    crosshair: { trigger: "both", orientation: "both" },
    trendlines: {
      0: {
        type: 'polynomial',
        degree: 3,
        visibleInLegend: true,
      }
    }
  };
Pełny kod 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>

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:

Opcje
  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
      }
    }
  };
Pełny kod 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>

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.

Opcje
        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
            }
          }
        };
    
Pełny kod HTML
<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>