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