概览
趋势线是叠加在图表上的一条线，显示数据的整体方向。
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，则结果如下所示：
相同的数据、相同的多项式、不同的数据窗口。
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>
更改不透明度和线宽
您可以通过将 opacity 设置为介于 0.0 到 1.0 之间的值来更改趋势线的透明度，通过设置 lineWidth 选项将线宽设置为 0.0。
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>
<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>
<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>