개요
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차 (차수 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>