Ringkasan
Google Chart mendukung tiga jenis garis tren, yaitu linear, polinomial, dan eksponensial.
Garis tren linear
Garis tren
Pada diagram di bawah ini, Anda dapat melihat garis tren linear pada diagram pencar yang membandingkan usia maple gula dengan diameter batangnya. Anda dapat mengarahkan kursor ke garis tren untuk melihat persamaan yang dihitung oleh Google Chart: 4,885 kali diameter + 0,730.
Untuk menggambar garis tren pada diagram, gunakan opsi trendlines dan tentukan deret data mana yang akan digunakan:
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);
}
Garis tren linear adalah jenis garis tren yang paling umum. Namun, terkadang kurva paling baik digunakan untuk mendeskripsikan data, dan untuk itu, kita memerlukan jenis garis tren lainnya.
Garis tren eksponensial
Jika penjelasan data terbaik adalah dengan eksponensial dari
bentuk eax+b, Anda dapat menggunakan atribut type
untuk menentukan garis tren
Catatan: Tidak seperti garis tren linear, ada beberapa cara berbeda untuk menghitung garis tren eksponensial. Saat ini kami hanya menyediakan satu metode, tetapi akan mendukung metode lainnya di masa mendatang, sehingga nama atau perilaku garis tren eksponensial saat ini mungkin akan berubah.
Untuk diagram ini, kita juga menggunakan visibleInLegend: true untuk
menampilkan kurva eksponensial di legenda.
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);
}
Mengubah warna
Secara default, garis tren diberi warna yang sama dengan deret data, tetapi
lebih terang. Anda dapat menggantinya dengan atribut color.
Di sini, kami memetakan berapa banyak digit π yang telah dihitung berdasarkan tahun
selama periode yang bermanfaat secara komputasi, yang mewarnai garis tren eksponensial
dengan warna hijau.
Berikut adalah spesifikasi garis tren:
trendlines: {
0: {
type: 'exponential',
color: 'green',
}
}
Garis tren polinomial
Untuk membuat garis tren polinomial, tentukan
jenis polynomial dan degree. Gunakan dengan
hati-hati, karena terkadang dapat memberikan hasil yang menyesatkan. Pada contoh di bawah ini, di mana set data kira-kira linear dipetakan dengan garis tren kubik (derajat 3):
Perhatikan bahwa penurunan setelah titik data terakhir hanya terlihat karena kami memperluas sumbu horizontal secara artifisial ke 15. Tanpa menetapkan hAxis.maxValue ke 15, akan terlihat seperti ini:
Data yang sama, polinomial yang sama, jendela yang berbeda pada data.
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>
Mengubah opasitas dan lebar garis
Anda dapat mengubah transparansi garis tren dengan menetapkan opacity ke nilai antara 0,0 dan 1,0, serta lebar garis dengan menetapkan opsi lineWidth.
trendlines: {
0: {
color: 'purple',
lineWidth: 10,
opacity: 0.2,
type: 'exponential'
}
}
Opsi lineWidth sudah cukup untuk sebagian besar penggunaan, tetapi
jika Anda menyukai tampilannya, ada opsi pointSize yang dapat
digunakan untuk menyesuaikan ukuran titik yang dapat dipilih di dalam garis tren:
Sama seperti cahaya yang merupakan gelombang dan partikel, garis tren adalah garis dan sekumpulan titik. Yang dilihat pengguna bergantung pada cara mereka berinteraksi dengannya: biasanya garis, tetapi saat mereka mengarahkan kursor ke garis tren, titik tertentu akan disorot. Titik itu akan memiliki diameter sama dengan:
- garis tren
pointSizejika ditentukan, jika tidak... pointSizeglobal jika ditentukan, jika tidak...- 7
Namun, jika Anda menetapkan opsi pointSize global atau
garis tren, semua titik yang dapat dipilih
akan ditampilkan, terlepas dari
lineWidth garis tren.
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>
Menampilkan poin
Garis tren disusun dengan memberi label pada sekelompok titik pada diagram. Opsi
pointsVisible garis tren menentukan apakah titik untuk garis tren tertentu
terlihat. Opsi default untuk semua garis tren adalah true, tetapi jika Anda ingin menonaktifkan visibilitas titik untuk garis tren pertama, tetapkan trendlines.0.pointsVisible: false.
Diagram di bawah menunjukkan cara mengontrol visibilitas poin berdasarkan garis tren.
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>
Mengubah label
Secara default, jika Anda memilih visibleInLegend, label
akan mengungkapkan persamaan garis tren. Anda dapat menggunakan labelInLegend untuk menentukan label yang berbeda. Di sini, kita menampilkan garis tren untuk masing-masing seri, dengan menetapkan label dalam legenda ke "Baris bug" (untuk seri 0) dan "Garis pengujian" (seri 1).
trendlines: {
0: {
labelInLegend: 'Bug line',
visibleInLegend: true,
},
1: {
labelInLegend: 'Test line',
visibleInLegend: true,
}
}
Korelasi
Koefisien determinasi, yang disebut R2 dalam statistik, mengidentifikasi seberapa dekat kecocokan garis tren dengan data. Korelasi sempurna adalah 1,0, dan antiorrelasi sempurna adalah 0,0.
Anda dapat menggambarkan R2 dalam legenda diagram dengan menetapkan opsi showR2 ke 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 = {
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>