ภาพรวม
Google แผนภูมิรองรับเส้นแนวโน้ม 3 ประเภท ได้แก่ เส้นตรง พหุนาม และเลขชี้กำลัง
เส้นแนวโน้มเชิงเส้น
เส้นแนวโน้ม
ในแผนภูมิด้านล่าง คุณจะเห็นเส้นแนวโน้มเชิงเส้นบนแผนภูมิกระจายที่เปรียบเทียบอายุของเมเปิลน้ำตาลกับเส้นผ่านศูนย์กลางของลำต้น วางเมาส์เหนือเส้นแนวโน้มเพื่อดูสมการที่คำนวณด้วย Google แผนภูมิ ได้แก่ 4.885 คูณเส้นผ่านศูนย์กลาง + 0.730
หากต้องการวาดเส้นแนวโน้มในแผนภูมิ ให้ใช้ตัวเลือก trendlines และระบุชุดข้อมูลที่จะใช้ดังนี้
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);
}
เส้นแนวโน้มเชิงเส้นเป็นเส้นแนวโน้มที่ใช้กันมากที่สุด แต่ในบางครั้ง เส้นโค้งเหมาะสำหรับการอธิบายข้อมูลมากที่สุด และในกรณีนั้น เราจะต้องใช้เส้นแนวโน้มอีกประเภทหนึ่ง
เส้นแนวโน้มเลขชี้กำลัง
หากข้อมูลของคุณอธิบายได้ดีที่สุดด้วยเลขชี้กำลังของฟอร์ม eax+b คุณสามารถใช้แอตทริบิวต์ type เพื่อระบุเส้นแนวโน้ม
หมายเหตุ: มีหลายวิธีในการคำนวณเส้นแนวโน้มแบบเอ็กซ์โปเนนเชียล ซึ่งต่างจากเส้นแนวโน้มเชิงเส้น ตอนนี้เราให้บริการเพียงวิธีเดียว แต่จะรองรับได้มากขึ้นในอนาคต ดังนั้นจึงอาจเป็นไปได้ที่ชื่อหรือลักษณะการทำงานของเส้นแนวโน้มแบบเอ็กซ์โปเนนเชียลปัจจุบันจะเปลี่ยนแปลง
สำหรับแผนภูมินี้ เราจะใช้ visibleInLegend: true เพื่อแสดงเส้นโค้งเอ็กซ์โปเนนเชียลในคำอธิบายด้วย
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);
}
การเปลี่ยนสี
โดยค่าเริ่มต้น เส้นแนวโน้มจะมีสีเดียวกับชุดข้อมูล แต่สีอ่อนกว่า คุณลบล้างค่านี้ได้ด้วยแอตทริบิวต์ color
ในตัวอย่างนี้ เราทำแผนภูมิจำนวนตัวเลขของ ₹ ซึ่งคำนวณตามปีในช่วงที่ให้ผลสำเร็จในการคำนวณ โดยให้สีเส้นแนวโน้มแบบเอ็กซ์โปเนนเชียล
ข้อกำหนดของเส้นแนวโน้มมีดังนี้
trendlines: {
0: {
type: 'exponential',
color: 'green',
}
}
เส้นแนวโน้มพหุนาม
หากต้องการสร้างเส้นแนวโน้มพหุนาม ให้ระบุประเภท polynomial และ degree โปรดใช้ความระมัดระวังเนื่องจากบางครั้งอาจทำให้เกิดผลลัพธ์ที่ทำให้เข้าใจผิด ในตัวอย่างด้านล่าง ซึ่งแสดงชุดข้อมูลเชิงเส้นคร่าวๆ ด้วยเส้นแนวโน้มเป็นลูกบาศก์ (องศา 3)
โปรดทราบว่าลดลงหลังจากจุดข้อมูลสุดท้ายมองเห็นได้เนื่องจากเราขยายแกนแนวนอนถึง 15 เกินความเป็นจริงเท่านั้น หากไม่ตั้งค่า hAxis.maxValue เป็น 15 ผลลัพธ์จะมีลักษณะดังนี้
ข้อมูลเดียวกัน มีพหุนามเหมือนกัน และมีกรอบเวลาที่แตกต่างกันในข้อมูล
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>
การเปลี่ยนความทึบแสงและความกว้างของเส้น
คุณเปลี่ยนความโปร่งใสของเส้นแนวโน้มได้โดยตั้งค่า opacity เป็นค่าระหว่าง 0.0 ถึง 1.0 และค่าความกว้างของเส้นโดยการตั้งค่าตัวเลือก lineWidth
trendlines: {
0: {
color: 'purple',
lineWidth: 10,
opacity: 0.2,
type: 'exponential'
}
}
ตัวเลือก lineWidth ก็เพียงพอต่อการใช้งานส่วนใหญ่แล้ว แต่ถ้าชอบรูปลักษณ์ ก็สามารถใช้ตัวเลือก pointSize เพื่อปรับแต่งขนาดของจุดที่เลือกได้ภายในเส้นแนวโน้มได้
เช่นเดียวกับแสงเป็นทั้งคลื่นและอนุภาค เส้นแนวโน้มก็เป็นทั้งเส้นและจุดหลายจุด สิ่งที่ผู้ใช้เห็นจะขึ้นอยู่กับวิธีที่ผู้ใช้โต้ตอบ ซึ่งตามปกติแล้วจะเป็นเส้น แต่เมื่อวางเมาส์เหนือเส้นแนวโน้ม จะมีการไฮไลต์จุดใดจุดหนึ่ง จุดนั้นจะมีเส้นผ่านศูนย์กลางเท่ากับ
- เส้นแนวโน้ม
pointSizeหากกำหนดไว้ มิฉะนั้น... pointSizeส่วนกลาง หากกำหนดไว้ มิฉะนั้น...- 7
อย่างไรก็ตาม หากคุณตั้งค่าตัวเลือก pointSize สำหรับทั่วโลกหรือตามแนวโน้ม จุดที่เลือกได้ทั้งหมดจะแสดงโดยไม่ขึ้นอยู่กับ lineWidth ของเส้นแนวโน้ม
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>
การทำให้จุดมองเห็นได้
เส้นแนวโน้มสร้างขึ้นโดยการประทับจุดจำนวนมากบนแผนภูมิ ตัวเลือก pointsVisible ของเส้นแนวโน้มจะเป็นตัวกำหนดว่าจุดของเส้นแนวโน้มหนึ่งๆ จะปรากฏหรือไม่ ตัวเลือกเริ่มต้นสำหรับเส้นแนวโน้มทั้งหมดคือ true แต่หากคุณต้องการปิดการแสดงจุดสำหรับเส้นแนวโน้มแรก ให้ตั้งค่า trendlines.0.pointsVisible: false
แผนภูมิด้านล่างแสดงการควบคุมระดับการเข้าถึงของจุดตามแนวโน้ม
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>
การเปลี่ยนป้ายกำกับ
โดยค่าเริ่มต้น หากคุณเลือก visibleInLegend ป้ายกำกับจะแสดงสมการของเส้นแนวโน้ม คุณใช้ labelInLegend เพื่อระบุป้ายกำกับอื่นได้ ในส่วนนี้ เราจะแสดงเส้นแนวโน้มสำหรับแต่ละชุด 2 ชุด โดยตั้งค่าป้ายกำกับในคำอธิบายเป็น "เส้นข้อบกพร่อง" (สำหรับชุด 0) และ "บรรทัดทดสอบ" (ชุดที่ 1)
trendlines: {
0: {
labelInLegend: 'Bug line',
visibleInLegend: true,
},
1: {
labelInLegend: 'Test line',
visibleInLegend: true,
}
}
ความสัมพันธ์
ค่าสัมประสิทธิ์การตัดสินใจที่เรียกว่า R2 ในสถิติจะระบุว่าเส้นแนวโน้มตรงกับข้อมูลมากน้อยเพียงใด สหสัมพันธ์ที่สมบูรณ์แบบคือ 1.0 และสหสัมพันธ์ที่สมบูรณ์แบบคือ 0.0
คุณสามารถแสดงภาพ R2 ในคำอธิบายของแผนภูมิโดยการตั้งค่าตัวเลือก showR2 เป็น 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>