Tổng quan
Google Biểu đồ hỗ trợ 3 loại đường xu hướng: tuyến tính, đa thức và luỹ thừa.
Đường xu hướng tuyến tính
Đường xu hướng
Trong biểu đồ bên dưới, bạn có thể thấy đường xu hướng tuyến tính trên biểu đồ tán xạ so sánh tuổi của cây phong đường với đường kính của thân. Bạn có thể di chuột qua đường xu hướng để xem phương trình do Google Biểu đồ tính toán: 4,885 lần đường kính + 0,730.
Để vẽ một đường xu hướng trên biểu đồ, hãy sử dụng lựa chọn trendlines và chỉ định chuỗi dữ liệu cần sử dụng:
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);
}
Đường xu hướng tuyến tính là loại đường xu hướng phổ biến nhất. Nhưng đôi khi, đường cong là cách tốt nhất để mô tả dữ liệu. Để làm được điều đó, chúng tôi sẽ cần một loại đường xu hướng khác.
Đường xu hướng luỹ thừa
Nếu dữ liệu được giải thích tốt nhất theo cấp số nhân của dạng eax+b, bạn có thể sử dụng thuộc tính type để chỉ định đường xu hướng
Lưu ý: Không giống như đường xu hướng tuyến tính, có một số cách để tính đường xu hướng theo cấp số nhân. Hiện tại, chúng tôi chỉ cung cấp một phương thức, nhưng chúng tôi sẽ hỗ trợ thêm nhiều phương thức trong tương lai. Vì vậy, tên hoặc hành vi của đường xu hướng luỹ thừa hiện tại có thể sẽ thay đổi.
Đối với biểu đồ này, chúng tôi cũng sử dụng visibleInLegend: true để hiển thị đường cong luỹ thừa trong phần chú thích.
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);
}
Thay đổi màu
Theo mặc định, các đường xu hướng được tô màu giống với chuỗi dữ liệu nhưng nhạt hơn. Bạn có thể ghi đè giá trị đó bằng thuộc tính color.
Ở đây, chúng tôi lập biểu đồ có bao nhiêu chữ số π được tính theo năm trong một giai đoạn tính toán hiệu quả, tô màu xanh lục cho đường xu hướng luỹ thừa.
Dưới đây là thông số của đường xu hướng:
trendlines: {
0: {
type: 'exponential',
color: 'green',
}
}
Đường xu hướng đa thức
Để tạo đường xu hướng đa thức, hãy chỉ định loại polynomial và degree. Hãy thận trọng khi sử dụng, vì đôi khi có thể dẫn đến kết quả gây hiểu lầm. Trong ví dụ bên dưới, nơi một tập dữ liệu đại khái tuyến tính được biểu thị bằng một đường xu hướng lập phương (độ 3):
Lưu ý rằng giảm mạnh sau điểm dữ liệu cuối cùng chỉ hiển thị bởi vì chúng tôi đã mở rộng trục hoành một cách giả tạo lên 15. Nếu không đặt hAxis.maxValue thành 15, giá trị này sẽ có dạng như sau:
Cùng dữ liệu, cùng đa thức, cửa sổ dữ liệu khác nhau.
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>
Thay đổi độ mờ và độ rộng đường kẻ
Bạn có thể thay đổi độ trong suốt của đường xu hướng bằng cách đặt opacity thành một giá trị nằm trong khoảng từ 0 đến 1, và độ rộng của đường bằng cách đặt tuỳ chọn lineWidth.
trendlines: {
0: {
color: 'purple',
lineWidth: 10,
opacity: 0.2,
type: 'exponential'
}
}
Tuỳ chọn lineWidth là đủ cho hầu hết các trường hợp sử dụng, nhưng nếu thích giao diện này thì bạn có thể dùng tuỳ chọn pointSize để tuỳ chỉnh kích thước của các dấu chấm có thể chọn bên trong đường xu hướng:
Giống như ánh sáng vừa là sóng vừa là hạt, đường xu hướng vừa là một đường vừa là một nhóm các điểm. Nội dung mà người dùng nhìn thấy tuỳ thuộc vào cách họ tương tác với đường kẻ đó: thông thường là một đường, nhưng khi họ di chuột qua đường xu hướng, một điểm cụ thể sẽ được làm nổi bật. Điểm đó sẽ có đường kính bằng:
- đường xu hướng
pointSizenếu đã xác định, nếu không... pointSizechung nếu được xác định, nếu không...- 7
Tuy nhiên, nếu bạn đặt tuỳ chọn pointSize toàn cục hoặc đường xu hướng pointSize, tất cả các điểm có thể chọn sẽ hiển thị, độc lập với lineWidth của đường xu hướng.
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>
Hiển thị các điểm
Các đường xu hướng được tạo bằng cách đánh dấu một loạt các dấu chấm trên biểu đồ. Tuỳ chọn pointsVisible của đường xu hướng sẽ xác định xem các điểm của một đường xu hướng cụ thể có hiển thị hay không. Lựa chọn mặc định cho tất cả các đường xu hướng là true, nhưng nếu bạn muốn tắt chế độ hiển thị điểm cho đường xu hướng đầu tiên, hãy đặt trendlines.0.pointsVisible: false.
Biểu đồ dưới đây minh hoạ cách kiểm soát khả năng hiển thị của các điểm trên cơ sở mỗi đường xu hướng.
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>
Thay đổi nhãn
Theo mặc định, nếu bạn chọn visibleInLegend, nhãn sẽ hiển thị phương trình của đường xu hướng. Bạn có thể sử dụng labelInLegend để chỉ định một nhãn khác. Ở đây, chúng ta
hiển thị một đường xu hướng cho mỗi loạt hai, đặt nhãn trong
huyền thoại thành "Lỗi dòng" (đối với loạt 0) và "Dòng thử nghiệm" (đối với loạt 1).
trendlines: {
0: {
labelInLegend: 'Bug line',
visibleInLegend: true,
},
1: {
labelInLegend: 'Test line',
visibleInLegend: true,
}
}
Mối quan hệ
Hệ số xác định, được gọi là R2 trong số liệu thống kê, giúp xác định mức độ trùng khớp của đường xu hướng với dữ liệu. Mối tương quan hoàn hảo là 1.0 và tương quan hoàn hảo là 0.0.
Bạn có thể mô tả R2 trong phần chú thích của biểu đồ bằng cách đặt tuỳ chọn showR2 thành 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>