簡介
「差異圖表」是一種圖表,可以用來比較兩張圖表與可比較資料之間的差異。藉由讓類似值看起來變化,可以清楚顯示資料集之間的變化。
建立差異比較表時,您可以呼叫包含兩個資料集的 computeDiff
方法,藉此產生代表差異比較的第三個資料集,然後再繪製圖表。
示例
本節將說明每個差異圖表類型的範例和程式碼範例。
差異度圖
為了示範差異化圖以下是這兩個實驗的結果,以及產生的差異圖表:
使用這兩個圖表時,您可以看出哪些項目有異動,但難以準確地看出。差異化圖會顯示每個資料點的軌跡。
以下是產生上述三個圖表的主要線條:
// 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
選項來變更新資料點的不透明度:
差異圓餅圖
以下是產生全部三個圖表的程式碼:
<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
來控制圓形的相對大小,使用 diff.innerCircle.borderFactor
來控制兩個圓的邊框,以及使用 diff.oldData.opacity
和 diff.newData.opacity
調整每個圓形的透明度。最後,您可以反轉該行為,讓最舊的資料以 diff.oldData.inCenter
包圍最新的資料。個別示例:
差異長條圖和柱狀圖
差異比較列和差異資料欄在舊資料之上重疊了較新的資料。在此,我們會以兩張簡單的柱狀圖呈現舊資料:
以更複雜的範例來說,我們來看看某些名字 (特別是 Google 視覺化夏季實習生名稱) 從 1980 年代到現在的轉變 (依照每 100 萬名嬰兒提供的數字 (以 Baby Name Wizard 為基礎)。
可產生全部四個圖表的程式碼:
<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
選項,比較差異資料欄和長條圖,以區分新舊兩條長條的相對寬度: