簡介
「趨勢線」
Google Chart 支援三種類型的趨勢線：線性、多項式和指數。
線性趨勢線
在下圖中，您可以看到散佈圖上的線性趨勢線，將糖楓的年齡與中繼後長進行比較。您可以將滑鼠遊標懸停在趨勢線上，查看 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 屬性覆寫這個屬性。我們透過圖表呈現在一年內計算的 4 位數的 4 位數，在指數上呈指數綠色的趨勢。
以下是趨勢線規格：
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 選項來設定線條寬度。
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>