이 페이지는 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 옵션을 사용하여 새 데이터 포인트의 불투명도를 변경할 수 있습니다.

차이 원형 차트

다음은 3개의 차트를 모두 생성하는 코드입니다.

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