ภาพรวม
Google Charts รองรับเส้นแนวโน้ม 3 ประเภท ได้แก่ เส้นตรง พหุนาม และเลขชี้กําลัง
เส้นแนวโน้ม
เส้นแนวโน้ม
ในแผนภูมิด้านล่าง คุณจะเห็นเส้นแนวโน้มแบบเชิงเส้นในแผนภูมิกระจาย โดยเปรียบเทียบอายุของต้นเมเปิลน้ําตาลกับเส้นผ่านศูนย์กลางของฝากระโปรงท้าย วางเมาส์เหนือเส้นแนวโน้มเพื่อดูสมการที่คํานวณโดย Google Charts ดังนี้ 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)
โปรดทราบว่า Plummet หลังจุดข้อมูลสุดท้ายเท่านั้นที่จะแสดงเนื่องจากเราขยายแกนแนวนอนเป็น 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
เพื่อระบุป้ายกํากับอื่นได้ ในส่วนนี้ เราจะแสดงเส้นแนวโน้มสําหรับชุดหนังสือแต่ละชุด โดยให้ป้ายกํากับในป้ายกํากับเป็น "บรรทัดข้อบกพร่อง" (สําหรับชุดที่ 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>