Genel bakış
Google Grafikler üç tür trend çizgisini destekler: doğrusal, polinom ve üstel.
Doğrusal trend çizgileri
Aşağıdaki grafikte, dağılım grafiğinde şeker akçaağaçlarının yaşı ile gövdelerinin çapını karşılaştıran doğrusal bir trend çizgisi görebilirsiniz. Google Charts tarafından hesaplanan: Çapın 4,885 katı + 0,730 olan denklemi görmek için fareyle trend çizgisinin üzerine gelebilirsiniz.
Grafikte trend çizgisi çizmek için trendlines seçeneğini kullanarak hangi veri serilerinin kullanılacağını belirtin:
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);
}
Doğrusal trend çizgileri, en yaygın trend çizgisi türüdür. Ancak bazen verileri tanımlamak için en iyi yöntem eğriyi kullanmaktır. Bunun için de başka bir trend çizgisi türü gerekir.
Üstel trend çizgileri
Verileriniz en iyi şekilde eax+b formunun üssüyle açıklanıyorsa aşağıda gösterildiği gibi bir type özelliğini kullanabilirsiniz:
Not: Doğrusal trend çizgilerinin aksine, üstel trend çizgilerini hesaplamanın birkaç farklı yolu vardır. Şu anda yalnızca bir yöntem sunuyoruz, ancak gelecekte daha fazla yöntem desteklenecektir. Bu nedenle, mevcut üstel trend çizgisinin adı veya davranışı değişebilir.
Bu grafikte, açıklamada üstel eğriyi
görüntülemek için de visibleInLegend: true kullanılır.
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);
}
Rengi değiştirme
Varsayılan olarak, trend çizgileri veri serileriyle aynı şekilde renklendirilir ancak daha açık renklidir. Bunu color özelliğiyle geçersiz kılabilirsiniz.
Burada, hesaplama açısından verimli bir dönemde ÷'un kaç basamağının hesaplandığını, üstel trend çizgisini yeşile boyayarak grafiklendiriyoruz.
Trend çizgileri spesifikasyonu şu şekildedir:
trendlines: {
0: {
type: 'exponential',
color: 'green',
}
}
Polinom trend çizgileri
Polinom trend çizgisi oluşturmak için polynomial türünü ve degree türünü belirtin. Bazen yanıltıcı sonuçlara yol açabileceğinden, kullanırken dikkatli olun. Yaklaşık olarak doğrusal bir veri kümesinin, kübik (3. derece) trend çizgisiyle çizildiği aşağıdaki örnekte:
Son veri noktasından sonraki çökmenin yalnızca yatay ekseni yapay olarak 15'e çıkardığımız için görünür olduğunu unutmayın. hAxis.maxValue değeri 15 olarak ayarlansaydı şu şekilde görünürdü:
Verilerde aynı veriler, aynı polinom, farklı pencere.
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>
Opaklığı ve çizgi genişliğini değiştirme
opacity öğesini 0,0 ile 1,0 arasında bir değere ve lineWidth seçeneğini ayarlayarak çizgi genişliğini ayarlayarak trend çizgisinin şeffaflığını değiştirebilirsiniz.
trendlines: {
0: {
color: 'purple',
lineWidth: 10,
opacity: 0.2,
type: 'exponential'
}
}
lineWidth seçeneği çoğu kullanım için yeterli olacaktır, ancak görünümü beğenirseniz trend çizgisindeki seçilebilir noktaların boyutunu özelleştirmek için kullanabileceğiniz bir pointSize seçeneği de vardır:
Işığın hem dalga hem de parçacık olması gibi, trend çizgisi de hem bir çizgi hem de bir dizi noktadır. Kullanıcıların gördükleri, reklamla nasıl etkileşimde bulunduklarına bağlıdır: Normalde bir çizgidir ancak trend çizgisinin üzerine geldiklerinde belirli bir nokta vurgulanır. Bu noktanın çapı şuna eşit olur:
- Tanımlanmışsa trend çizgisi
pointSize, aksi takdirde... - Tanımlanmışsa global
pointSize, aksi takdirde... - 7
Bununla birlikte, genel veya trend çizgisi pointSize seçeneğini ayarlarsanız trend çizgisinin lineWidth değerinden bağımsız olarak seçilebilir tüm noktalar gösterilir.
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>
Noktaları görünür hale getirme
Trend çizgileri, grafikte bir dizi nokta eklenerek oluşturulur. Trend çizgisinin pointsVisible seçeneği, belirli bir trend çizgisi için noktaların görünür olup olmadığını belirler. Tüm trend çizgileri için varsayılan seçenek true şeklindedir. Ancak ilk trend çizginiz için nokta görünürlüğünü devre dışı bırakmak istiyorsanız trendlines.0.pointsVisible: false değerini ayarlayın.
Aşağıdaki grafikte, noktaların görünürlüğünün trend çizgisine göre kontrol edilmesi gösterilmektedir.
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>
Etiketi değiştirme
Varsayılan olarak visibleInLegend'i seçerseniz etiket, trend çizgisinin denklemini gösterir. Farklı bir etiket belirtmek için labelInLegend kullanabilirsiniz. Burada, açıklamadaki etiketleri "Hata çizgisi" (seri 0 için) ve "Test çizgisi" (seri 1) olarak ayarlayarak iki serinin her biri için bir trend çizgisi görüntüleriz.
trendlines: {
0: {
labelInLegend: 'Bug line',
visibleInLegend: true,
},
1: {
labelInLegend: 'Test line',
visibleInLegend: true,
}
}
İlişkiler
İstatistiklerde R2 olarak adlandırılan belirleme katsayısı, trend çizgisinin verilerle ne kadar yakından eşleştiğini tanımlar. Kusursuz korelasyon 1,0; mükemmel bir antikorelasyon ise 0,0'dır.
showR2 seçeneğini true olarak ayarlayarak grafiğinizin açıklamasında R2'yi gösterebilirsiniz.
<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>