此页面由 Cloud Translation API 翻译。

差异图表

概览
示例

概览

差异图表是一种通过具有可比性的数据突出显示两个图表之间差异的图表。通过突出类似值之间的变化，您可以揭示数据集之间的变化。

创建 diff 图表的方法为：使用两个数据集调用 computeDiff 方法，生成第三个数据集来代表差异，然后绘制该数据集。

Diff 图表适用于条形图、柱形图、饼图和散点图。

示例

在本部分中，您将看到每种差异图表类型的示例和代码示例。

差异散点图

为了演示差异散点图，我们来看一对实验，每个实验比较两款药物。以下是这两个实验的结果以及生成的差异图表：

如果您看一下这两个图表，就会发现某些地方发生了变化，但很难确切地知道它们是什么。通过显示散点图，您可以清楚了解每个数据点的轨迹。

以下是生成上述三个图表的关键线：

// 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 可视化夏季实习生的姓名）的流行程度如何从 20 世纪 80 年代更改为现在（数字是数百万婴儿，由婴儿名字巫师提供）。

用于生成全部四个图表的代码：

  <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 选项控制新旧条形的相对宽度：