เส้นแนวโน้ม

  1. ภาพรวม
  2. เส้นแนวโน้มเชิงเส้น
  3. เส้นแนวโน้มเลขชี้กำลัง
  4. เส้นแนวโน้มพหุนาม
  5. การเปลี่ยนสี
  6. การเปลี่ยนความทึบแสงและความกว้างของเส้น
  7. การทำให้จุดมองเห็นได้
  8. การเปลี่ยนป้ายกำกับ
  9. ความสัมพันธ์

ภาพรวม

เส้นแนวโน้มคือเส้นที่ซ้อนทับบนแผนภูมิเพื่อแสดงทิศทางโดยรวมของข้อมูล Google แผนภูมิสามารถสร้างเส้นแนวโน้มสำหรับแผนภูมิกระจาย แผนภูมิแท่ง แผนภูมิคอลัมน์ และแผนภูมิเส้นโดยอัตโนมัติ

Google แผนภูมิรองรับเส้นแนวโน้ม 3 ประเภท ได้แก่ เส้นตรง พหุนาม และเลขชี้กำลัง

เส้นแนวโน้มเชิงเส้น

เส้นแนวโน้มเชิงเส้นคือเส้นตรงที่ใกล้เคียงกับข้อมูลในแผนภูมิมากที่สุด (ถ้าจะให้พูดให้ละเอียดก็คือ เส้นที่ย่อผลรวมของระยะทางยกกำลัง 2 จากทุกจุด)

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