趋势线

  1. 概览
  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。请谨慎使用，因为它们有时可能会导致误导性结果。在下面的示例中，使用三维（三度）趋势线绘制一个大致线性数据集：

请注意，由于我们人为将横轴的扩展范围扩大到 15，因此仅可见最后一个数据点后的对角。如果没有将 hAxis.maxValue 设置为 15，则代码应如下所示：

相同的数据、相同的多项式、不同的数据窗口。

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

更改不透明度和线宽

您可以通过将 opacity 设置为 0.0 到 1.0 之间的值来更改趋势线的透明度，并通过设置 lineWidth 选项更改线宽。

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

lineWidth 选项足以满足大多数用途，不过，如果您喜欢这个外观，还有一个 pointSize 选项，可用于自定义趋势线内可选点的大小：

就像光是波浪和粒子一样，趋势线也是线条和大量的点。用户看到的内容取决于与他们互动的方式：通常是一条线，但当用户将鼠标悬停在趋势上时，系统会突出显示特定的点。该点的直径将等于：

  • 趋势线 pointSize（如果已定义），否则...
  • 全局 pointSize（如果已定义），否则...
  • 7

不过，如果您设置了全局或趋势 pointSize 选项，则系统会显示所有所选点，与趋势线的 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
<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。

下面的图表演示了如何根据每个趋势线控制点的可见性。

选项
        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
<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 指定其他标签。我们在这里针对两个数据系列分别显示一条趋势线，将图例中的标签设置为“错误线”（针对系列 0）和“测试线”（系列 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>