Biểu đồ khác biệt

Tổng quan

Biểu đồ khác biệt là một biểu đồ được thiết kế để làm nổi bật sự khác biệt giữa 2 biểu đồ có dữ liệu tương đương. Bằng cách làm nổi bật sự thay đổi giữa các giá trị tương tự, chúng có thể cho thấy sự khác biệt giữa các tập dữ liệu.

Bạn tạo một biểu đồ khác biệt bằng cách gọi phương thức computeDiff với 2 tập dữ liệu để tạo tập dữ liệu thứ ba thể hiện điểm khác biệt, sau đó vẽ tập dữ liệu đó.

Biểu đồ khác biệt được hỗ trợ cho biểu đồ thanh, biểu đồ cột, biểu đồ hình tròn và biểu đồ tán xạ.

Ví dụ

Trong phần này, bạn sẽ thấy các ví dụ và mã mẫu cho từng loại biểu đồ khác biệt.

Biểu đồ tán xạ khác biệt

Để minh hoạ biểu đồ tán xạ khác biệt, hãy xem xét một cặp thử nghiệm, mỗi thử nghiệm so sánh hai loại thuốc. Dưới đây là kết quả của 2 thử nghiệm và biểu đồ điểm khác biệt thu được:

Khi nhìn vào hai biểu đồ đó, bạn có thể biết nội dung nào đó đã thay đổi, nhưng rất khó để biết chính xác điều gì đã thay đổi. Biểu đồ tán xạ so sánh làm rõ bằng cách cho thấy quỹ đạo của từng điểm dữ liệu.

Sau đây là những yếu tố chính tạo ra ba biểu đồ nêu trên:

// 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);

Bạn có thể thay đổi độ mờ của các đuôi bằng tuỳ chọn diff.oldData.opacity và độ mờ của các điểm dữ liệu mới bằng tuỳ chọn diff.newData.opacity:

Biểu đồ hình tròn khác biệt

Dưới đây là mã để tạo cả ba biểu đồ:

  <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>

Bạn có thể kiểm soát kích thước tương đối của các vòng tròn bằng diff.innerCircle.radiusFactor, đường viền giữa hai vòng tròn bằng diff.innerCircle.borderFactor và độ trong suốt của mỗi vòng tròn có diff.oldData.opacity và diff.newData.opacity. Cuối cùng, bạn có thể đảo ngược hành vi này để dữ liệu cũ nhất xung quanh dữ liệu mới nhất bằng diff.oldData.inCenter. Sau đây là ví dụ về từng kiểu:

Biểu đồ cột và thanh khác biệt

Biểu đồ thanh điểm khác biệt và cột điểm khác biệt sẽ phủ dữ liệu mới hơn lên trên dữ liệu cũ. Ở đây, chúng ta lấy hai biểu đồ cột đơn giản — một trong hai dữ liệu cũ, một trong hai dữ liệu mới — và so sánh chúng:

Để có một ví dụ phức tạp hơn, hãy xem mức độ phổ biến của một số cái tên (cụ thể là tên của các thực tập sinh mùa hè trên Google Hình ảnh hoá) đã thay đổi như thế nào từ những năm 1980 đến hiện tại (số lượng trên mỗi triệu em bé, do Wizard Name Name (Tên bé)).

Mã để tạo tất cả 4 biểu đồ:

  <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>

Biểu đồ thanh và cột khác biệt cho phép bạn kiểm soát chiều rộng tương đối của thanh cũ và thanh mới bằng tuỳ chọn diff.newData.widthFactor: