개요
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 옵션을 설정하여 선 너비를 설정하여 추세선의 투명도를 변경할 수 있습니다.
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>