이 페이지는 Cloud Translation API를 통해 번역되었습니다.

차이점 차트

개요
예

개요

차이 차트는 비교 가능한 데이터가 있는 두 차트 간의 차이점을 강조 표시하도록 설계된 차트입니다. 유사한 값 간의 변경을 눈에 띄게 만들어 데이터 세트 간의 변화를 확인할 수 있습니다.

두 개의 데이터 세트로 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년대에서 현재로 어떻게 변화했는지 살펴보겠습니다 (아기 이름 마법사 제공).

4개의 차트를 모두 생성하는 코드는 다음과 같습니다.

  <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 옵션으로 이전 막대와 새 막대의 상대적 너비를 제어할 수 있습니다.