趨勢線

  1. Overview
  2. 線性趨勢線
  3. 指數趨勢線
  4. 多項式趨勢線
  5. 變更顏色
  6. 變更不透明度和線條寬度
  7. 明確標出點
  8. 變更標籤
  9. 關聯性

總覽

「趨勢線」是在圖表上疊加的線條，顯示資料的整體方向。Google 圖表可以自動產生「散佈圖」、「長條圖」、「柱狀圖」和「折線圖」的趨勢線。

Google 圖表支援三種趨勢線：線性、多項式和指數。

線性趨勢線

「線性」趨勢線是最接近圖表中資料的直線。(精確來說，這個線條可將每個點之間的平方距離總和縮到最小)。

在下圖中，您可以看到散佈圖上的線性趨勢線，比較糖楓的年齡與後線直徑。將遊標懸停在趨勢線上，即可查看 Google 圖表計算的方程式：直徑 4.885 倍 + 0.730。

如要在圖表中繪製趨勢線，請使用 trendlines 選項，並指定要使用的資料序列：

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);
}

線性趨勢線是最常見的趨勢線類型。但在某些情況下，曲線最適合用來描述資料，因此您需要另一種趨勢線。

指數趨勢線

如果最適合用 eax+b 格式的指數來解釋資料，您可以使用 type 屬性指定指數趨勢線，如下所示：

注意：與線性趨勢線不同，計算指數趨勢線有幾種不同的方式。我們目前只提供一種方法，但日後會支援更多方法，因此目前指數趨勢線的名稱或行為可能會改變。

在這個圖表中，我們也會使用 visibleInLegend: true 來顯示圖例中的指數曲線。

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);
}

變更顏色

根據預設，趨勢線的顏色與資料序列相同，但顏色較淺。您可以使用 color 屬性覆寫該屬性。此處的圖表呈現計算所得期間內，以年份計算的 π 位數，將指數趨勢綠色上色。

趨勢線的規格如下：

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

多項式趨勢線

如要產生多項式趨勢線，請指定類型 polynomial 和 degree。請謹慎使用，因為這類問題有時可能會產生誤導結果。在下方範例中，系統使用立方 (第 3 度) 趨勢線繪製大致的線性資料集：

請注意，我們刻意將水平軸延伸到 15，因此只有在最後一個資料點後才會顯示亮度器。如果不將 hAxis.maxValue 設為 15，它看起來會像這樣：

資料上會有相同的多項式，也就是不同的多項式。

選項完整 HTML
  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>

變更不透明度和線條寬度

您可以設定 lineWidth 選項，將 opacity 設為介於 0.0 和 1.0 之間的值，即可變更趨勢線的透明度。

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

lineWidth 選項足以滿足大部分用途，但如果您滿意，可以使用 pointSize 選項自訂趨勢線中可選取點的大小：

就像光是一波和一顆粒子，趨勢線也是一條線和一堆點。使用者看到的內容取決於他們與其互動的方式：通常為線條，但當使用者將遊標懸停在趨勢線上時，系統會醒目顯示特定點。該點的直徑會等於：

  • 趨勢線 pointSize (如有定義)，否則...
  • 全域 pointSize (如有定義)，否則...
  • 7

不過，如果您設定了全域或趨勢 pointSize 選項，系統就會顯示所有可選取的點，不受趨勢線的 lineWidth 影響。

選項完整 HTML
  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>

提高積分

在圖表中加上許多圓點，即可涵蓋趨勢線。趨勢線的 pointsVisible 選項可決定是否要顯示特定趨勢線的資料點。所有趨勢線的預設選項為 true，但如要關閉第一條趨勢線的點顯示設定，請設定 trendlines.0.pointsVisible: false。

下方圖表展示如何以各趨勢來控制點的顯示設定。

選項完整 HTML
        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>

   

變更標籤

根據預設，如果您選取 visibleInLegend，標籤就會顯示趨勢線的方程式。您可以使用 labelInLegend 指定其他標籤。在本例中，我們顯示兩個序列的趨勢線，將圖例中的標籤設為「Bug line」(第 0 系列) 和「Test line」(第 1 系列)。

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

關聯性

統計資料中的決定係數 (稱為 R2) 可找出趨勢線與資料的相符程度。完美的相關性為 1.0，完美對比度為 0.0。

只要將 showR2 選項設為 true，即可在圖表圖例中呈現 R2。

 
<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>