ภาพรวม
แผนภูมิความแตกต่าง คือแผนภูมิที่ออกแบบมาเพื่อไฮไลต์ความแตกต่างระหว่างแผนภูมิ 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 รายการมาใช้งาน แผนภูมิแรกคือข้อมูลเก่า 1 แผนภูมิ และข้อมูลใหม่มีดังนี้
หากต้องการดูตัวอย่างที่ซับซ้อนมากขึ้น มาดูกันว่าความนิยมของชื่อบางชื่อ (โดยเฉพาะชื่อเกมฝึกฤดูร้อนของ Google การแสดงภาพ) เปลี่ยนจากช่วงทศวรรษ 1980 ถึงปัจจุบันอย่างไร (ตัวเลขต่อเด็กทารกหลายล้านคน โดยได้รับความเอื้อเฟื้อจากวิซาร์ดชื่อเด็ก)
โค้ดสําหรับสร้างแผนภูมิทั้ง 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
ดังนี้