差異比較表

總覽

「差異圖表」是一種圖表，用於醒目顯示兩個含有可比較資料的圖表之間的差異。將類似值之間的變更顯而易見，就能揭示資料集之間的變化。

如要建立差異比較表，請使用兩個資料集呼叫 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 年代至今 (尤其是 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 選項控制新舊長條的相對寬度：