Genel bakış
Google Grafikler üç tür trend çizgisini destekler: doğrusal, çok terimli ve üstel.
Doğrusal trend çizgileri
Aşağıdaki grafikte dağılım grafiği üzerinde doğrusal bir trend çizgisi görebilirsiniz. Şeker akçaağacının yaşını santralin çapına göre karşılaştırabilirsiniz. Google Grafikler tarafından hesaplanan denklemi görmek için fareyle trend çizgisinin üzerine gelebilirsiniz: Çapın 4,885 katı + 0,730.
Grafikte trend çizgisi çizmek için trendlines seçeneğini kullanın ve hangi veri dizilerinin 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 çizgi türüdür. Ancak bazen verilerin açıklanması için en iyi yöntem bir eğridir. Bunun için başka bir trend çizgisi gerekir.
Üstel trend çizgileri
Verileriniz en iyi şekilde eax+b biçiminin bir üssüyle açıklanıyorsa aşağıda gösterildiği gibi type özelliğini kullanabilirsiniz:
Not: Doğrusal trend çizgilerinin aksine, üstel trend çizgilerini hesaplamanın birkaç farklı yöntemi vardır. Şu anda yalnızca bir yöntem sunuyoruz ancak ileride daha fazlasını destekleyeceğiz. Bu nedenle, mevcut üstel trend çizgisinin adı veya davranışı değişebilir.
Bu grafik için aynı zamanda açıklamada üstel eğriyi görüntülemek üzere visibleInLegend: true kullanıyoruz.
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
Trend çizgileri varsayılan olarak veri dizileriyle aynı renktedir ancak daha açıktır. Bunu color özelliğiyle geçersiz kılabilirsiniz.
Burada, sayısal olarak verimli bir dönem boyunca yıllara göre kaç ÷ basamağının hesaplandığını ve üstel çizgi yeşilini renklendirdiğimizi listeliyoruz.
Trend çizgilerinin teknik özellikleri şöyledir:
trendlines: {
0: {
type: 'exponential',
color: 'green',
}
}
Çok terimli trend çizgileri
Çok terimli bir trend çizgisi oluşturmak için polynomial ve bir degree türü belirtin. Bazen yanıltıcı sonuçlara yol açabileceğinden, dikkatli kullanın. 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 düşüşün ancak yatay eksende yapay olarak 15'e çıktığı için görülebileceğini unutmayın. hAxis.maxValue 15 olarak ayarlanmasaydı aşağıdaki gibi olurdu:
Aynı veriler, aynı polinom, veriler üzerinde farklı aralık.
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
Trend çizgisinin şeffaflığını değiştirmek için opacity değerini 0,0 ile 1,0 arasında, çizgi genişliğini ise lineWidth seçeneğiyle ayarlayabilirsiniz.
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ü kullanmak isterseniz trend çizgisinin içindeki seçilebilir noktaların boyutunu özelleştirmek için kullanılabilecek bir pointSize seçeneği vardır:
Hem dalga hem de parçacık olması gibi, trend çizgisi hem çizgi hem de noktadır. Kullanıcıların ne göreceği, nasıl etkileşimde bulunduklarına bağlıdır: Normalde bir çizgidir ancak fareyle çizginin üzerine geldiğinizde belirli bir nokta vurgulanır. Bu çap, aşağıdakine eşittir:
- ve trend çizgisi tanımlanırsa
pointSize. - tanımlanmışsa dünya genelinde
pointSize - 7
Ancak global veya trend pointSize seçeneğini belirlerseniz trend çizgisinin lineWidth özelliğinden bağımsız olarak tüm seçilebilir 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>
Puanları görünür hale getirme
Trend çizgileri, grafikte çok sayıda nokta damgalanır. Trend çizgisinin pointsVisible seçeneği, belirli bir trend çizgisinin noktalarının görünür olup olmayacağını belirler. Tüm trend çizgileri için varsayılan seçenek true olsa da ilk trend çizginiz için nokta görünürlüğünü devre dışı bırakmak istiyorsanız trendlines.0.pointsVisible: false özelliğini ayarlayın.
Aşağıdaki grafikte, görünürlüğün trend bazında kontrol edildiği 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 seçerseniz etiket trend çizgisinin denklemini ortaya çıkarır. Farklı bir etiket belirtmek için labelInLegend kullanabilirsiniz. Burada, iki serinin her biri için bir trend çizgisi görüyoruz. Bu şekilde, başlıktaki etiketleri "Hata satırı" (0 serisi için) ve "Test serisi" (1. dizi) olarak ayarladık.
trendlines: {
0: {
labelInLegend: 'Bug line',
visibleInLegend: true,
},
1: {
labelInLegend: 'Test line',
visibleInLegend: true,
}
}
İlişkiler
İstatistikte R2 adlı belirleme katsayısı, bir trend çizgisinin verilerle ne kadar yakından eşleştiğini tanımlar. Kusursuz korelasyon 1,0 ve mükemmel karşıtlık ise 0,0'dır.
showR2 seçeneğini true olarak ayarlayarak grafiğinizin lezzetinde R2 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>