แผนภูมิความแตกต่าง

• ภาพรวม
• ตัวอย่าง
  • แผนภูมิกระจาย
  • ความแตกต่างของแผนภูมิวงกลม
  • แผนภูมิแท่งและแผนภูมิคอลัมน์ที่ต่างกัน

ภาพรวม

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

คุณสร้างแผนภูมิความแตกต่างโดยการเรียกใช้เมธอด computeDiff ที่มีชุดข้อมูล 2 ชุด เพื่อสร้างชุดข้อมูลที่ 3 ที่แสดงถึงความแตกต่าง แล้ววาดดังกล่าว

แผนภูมิความแตกต่างใช้ได้กับแผนภูมิแท่ง แผนภูมิคอลัมน์ แผนภูมิวงกลม และแผนภูมิกระจาย

ตัวอย่าง

ในส่วนนี้ คุณจะเห็นตัวอย่างและตัวอย่างโค้ดสำหรับแผนภูมิที่แตกต่างกันแต่ละประเภท

แผนภูมิกระจาย

ในการสาธิตแผนภูมิกระจาย ลองดูการทดสอบ 2 คู่ โดยแต่ละรายการจะเปรียบเทียบยา 2 ตัว ต่อไปนี้เป็นผลลัพธ์จากการทดสอบ 2 รายการและแผนภูมิความแตกต่างที่ได้

หากคุณสังเกตดูแผนภูมิทั้ง 2 รายการดังกล่าว คุณจะทราบได้ว่ามีอะไรเปลี่ยนแปลง แต่บอกได้ยากว่าสิ่งใด แผนภูมิกระจายของจุดข้อมูลจะช่วยให้เห็นชัดเจนยิ่งขึ้นด้วยการแสดงวิถีของจุดข้อมูลแต่ละจุด

เส้นสำคัญที่สร้างแผนภูมิ 3 รายการด้านบนมีดังนี้

// Create the three charts: before, after, and diff.
var chartBefore = new google.visualization.ScatterChart(document.getElementById('chart_before_div'));
var chartAfter = new google.visualization.ScatterChart(document.getElementById('chart_after_div'));
var chartDiff = new google.visualization.ScatterChart(document.getElementById('chart_diff_div'));

// Draw the before and after charts.
chartBefore.draw(oldData);
chartAfter.draw(newData);

// Draw the diff chart.
var diffData = chartDiff.computeDiff(oldData, newData);
chartDiff.draw(diffData);

คุณเปลี่ยนความทึบแสงของด้านได้ด้วยตัวเลือก diff.oldData.opacity รวมทั้งความทึบแสงของจุดข้อมูลใหม่โดยใช้ตัวเลือก diff.newData.opacity ดังนี้

ความแตกต่างของแผนภูมิวงกลม

นี่คือโค้ดสำหรับสร้างแผนภูมิทั้ง 3 รายการ

  <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 oldData = google.visualization.arrayToDataTable([
      ['Major', 'Degrees'],
      ['Business', 256070], ['Education', 108034],
      ['Social Sciences & History', 127101], ['Health', 81863],
      ['Psychology', 74194]]);

    var newData = google.visualization.arrayToDataTable([
      ['Major', 'Degrees'],
      ['Business', 358293], ['Education', 101265],
      ['Social Sciences & History', 172780], ['Health', 129634],
      ['Psychology', 97216]]);

    var options = { pieSliceText: 'none' };

    var chartBefore = new google.visualization.PieChart(document.getElementById('piechart_before'));
    var chartAfter = new google.visualization.PieChart(document.getElementById('piechart_after'));
    var chartDiff = new google.visualization.PieChart(document.getElementById('piechart_diff'));

    chartBefore.draw(oldData, options);
    chartAfter.draw(newData, options);

    var diffData = chartDiff.computeDiff(oldData, newData);
    chartDiff.draw(diffData, options);
  }
</script>
<span id='piechart_before' style='width: 450px; display: inline-block'></span>
<span id='piechart_after' style='width: 450px; display: inline-block'></span>
<br>
<span id='piechart_diff' style='width: 450px; position: absolute; left: 250px'></span>

คุณควบคุมขนาดสัมพัทธ์ของวงกลมได้ด้วย diff.innerCircle.radiusFactor, เส้นขอบระหว่างวงกลม 2 รูปด้วย diff.innerCircle.borderFactor และความโปร่งใสของวงกลมแต่ละรูปด้วย diff.oldData.opacity และ diff.newData.opacity สุดท้าย คุณสามารถสลับลักษณะการทำงานเพื่อให้ข้อมูลที่เก่าที่สุดล้อมรอบข้อมูลใหม่ล่าสุดด้วย diff.oldData.inCenter โดยตัวอย่างแต่ละรายการมีดังนี้

แผนภูมิแท่งและแผนภูมิคอลัมน์ที่ต่างกัน

แผนภูมิแท่งความแตกต่างและแผนภูมิคอลัมน์ความแตกต่างจะวางซ้อนข้อมูลที่ใหม่กว่ากับข้อมูลที่เก่ากว่า ในตัวอย่างนี้ เราใช้แผนภูมิคอลัมน์ง่ายๆ 2 รายการ อันได้แก่ ข้อมูลเก่าและแผนภูมิใหม่ และแตกต่างกัน

สำหรับตัวอย่างที่ซับซ้อนมากขึ้น ลองดูว่าความนิยมของบางชื่อ (โดยเฉพาะชื่อการฝึกงานฤดูร้อนของ Google Visualization) เปลี่ยนจากช่วงปี 1980 มาจนถึงปัจจุบัน (ตัวเลขต่อทารกหลายล้านคน โดยได้รับความเอื้อเฟื้อจาก Baby Name Wizard)

โค้ดสำหรับสร้างแผนภูมิทั้ง 4 แบบ:

  <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 oldData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 250],
      ['Rachel', 4200],
      ['Patrick', 2900],
      ['Eric', 8200]
    ]);

    var newData = google.visualization.arrayToDataTable([
      ['Name', 'Popularity'],
      ['Cesar', 370],
      ['Rachel', 600],
      ['Patrick', 700],
      ['Eric', 1500]
    ]);

    var colChartBefore = new google.visualization.ColumnChart(document.getElementById('colchart_before'));
    var colChartAfter = new google.visualization.ColumnChart(document.getElementById('colchart_after'));
    var colChartDiff = new google.visualization.ColumnChart(document.getElementById('colchart_diff'));
    var barChartDiff = new google.visualization.BarChart(document.getElementById('barchart_diff'));

    var options = { legend: { position: 'top' } };

    colChartBefore.draw(oldData, options);
    colChartAfter.draw(newData, options);

    var diffData = colChartDiff.computeDiff(oldData, newData);
    colChartDiff.draw(diffData, options);
    barChartDiff.draw(diffData, options);
  }
</script>

<span id='colchart_before' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_after' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='colchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>
<span id='barchart_diff' style='width: 450px; height: 250px; display: inline-block'></span>

คอลัมน์ความแตกต่างและแผนภูมิแท่งช่วยให้คุณควบคุมความกว้างสัมพัทธ์ของแท่งเดิมและแท่งใหม่ได้ด้วยตัวเลือก diff.newData.widthFactor ดังนี้