Ringkasan
Google Chart mendukung tiga jenis garis tren, yaitu linear, polinomial, dan eksponensial.
Garis tren linear
Garis tren
Pada diagram di bawah, Anda dapat melihat garis tren linear pada diagram sebar yang membandingkan usia gula maple 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 seri data 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 linier adalah jenis garis tren yang paling umum. Namun, terkadang kurva adalah cara terbaik untuk mendeskripsikan data, dan untuk itu, kita memerlukan jenis garis tren lain.
Garis tren eksponensial
Jika penjelasan data terbaik adalah dengan eksponensial dalam bentuk eax+b, Anda dapat menggunakan atribut type
untuk menentukan garis tren
Catatan: Tidak seperti garis tren linear, ada beberapa cara untuk menghitung garis tren eksponensial. Saat ini, kami hanya menyediakan satu metode, tetapi akan mendukung lebih banyak metode di masa mendatang, sehingga mungkin nama atau perilaku garis tren eksponensial saat ini akan berubah.
Untuk diagram ini, kami juga menggunakan visibleInLegend: true
untuk
menampilkan kurva eksponensial dalam 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 rangkaian data, tetapi
lebih terang. Anda dapat menggantinya dengan atribut color
.
Di sini, kami membuat diagram jumlah digit yang telah dihitung menurut tahun selama periode komputasi yang bermanfaat, yang mewarnai garis tren eksponensial hijau.
Berikut 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 menyebabkan hasil yang menyesatkan. Pada contoh di bawah, dengan set data kurang lebih linear dipetakan dengan garis tren kubik (derajat 3):
Perhatikan bahwa penurunan setelah titik data terakhir hanya terlihat karena kita memalsukan sumbu horizontal menjadi 15. Tanpa menetapkan hAxis.maxValue ke 15, tampilannya 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
akan cukup untuk sebagian besar penggunaan, tetapi
jika Anda menyukai tampilan, 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 sekaligus sekumpulan titik. Yang dilihat pengguna bergantung pada cara mereka berinteraksi dengannya: biasanya garis, tetapi saat mereka mengarahkan kursor ke atas garis tren, titik tertentu akan ditandai. Titik tersebut akan memiliki diameter yang sama dengan:
- garis tren
pointSize
jika ditentukan, jika tidak... pointSize
global jika ditentukan, jika tidak...- 7
Namun, jika Anda menetapkan opsi pointSize
global atau
trendline, semua titik yang dapat dipilih
akan ditampilkan, terlepas dari
lineWidth
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 tanda 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 Anda, tetapkan trendlines.0.pointsVisible: false
.
Diagram di bawah ini menunjukkan kontrol visibilitas titik per 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 setiap dua rangkaian, dengan menetapkan label di
legenal ke "Bug line" (untuk seri 0) dan "Test line" (seri 1).
trendlines: { 0: { labelInLegend: 'Bug line', visibleInLegend: true, }, 1: { labelInLegend: 'Test line', visibleInLegend: true, } }
Korelasi
Koefisien penetapan, yang disebut R2 dalam statistik, mengidentifikasi seberapa dekat garis tren dengan data. Korelasi yang sempurna adalah 1,0, dan antikorelasi yang 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>