Biểu đồ khác biệt

Tổng quan

Biểu đồ khác biệt là biểu đồ được thiết kế để làm nổi bật sự khác biệt giữa hai biểu đồ bằng những dữ liệu tương đương. Bằng cách làm cho những thay đổi giữa các giá trị tương tự trở nên nổi bậ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 nhau bằng cách gọi phương thức computeDiff với hai tập dữ liệu để tạo tập dữ liệu thứ ba đại diện cho phần dữ liệu, sau đó vẽ tập dữ liệu đó.

Biểu đồ khác có sẵn 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 nhau.

Biểu đồ tán xạ thuế

Để minh hoạ biểu đồ tán xạ khác nhau, 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ả từ hai thử nghiệm và biểu đồ khác biệt thu được:

Nếu xem lại hai biểu đồ này, bạn có thể cho biết điều gì đã thay đổi, nhưng thật khó để nói chính xác điều gì. Biểu đồ tán xạ khác nhau thể hiện rõ ràng qua quỹ đạo của từng điểm dữ liệu.

Dưới đây là các dòng chính tạo ra 3 biể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 với tuỳ chọn diff.newData.opacity:

Biểu đồ hình tròn thuế

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 các vòng tròn với diff.innerCircle.borderFactor và độ trong suốt của mỗi vòng tròn với diff.oldData.opacity và diff.newData.opacity. Cuối cùng, bạn có thể đảo ngược hành vi để dữ liệu cũ nhất bao quanh dữ liệu mới nhất bằng diff.oldData.inCenter. Ví dụ về từng phương án:

Biểu đồ thanh và cột

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

Để biết thêm 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è của Google Hình ảnh) đã thay đổi từ những năm 1980 sang nay (số lượng trên một triệu trẻ sơ sinh, dưới sự trợ giúp của Tên thú cưng).

Mã để tạo 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 đồ cột và biểu đồ thanh khác biệt cho phép bạn kiểm soát chiều rộng tương đối của các thanh cũ và thanh mới bằng tuỳ chọn diff.newData.widthFactor: