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