개요
차이점 차트는 비슷한 데이터를 가진 두 차트 간의 차이를 강조하도록 설계된 차트입니다. 유사 값 간의 변경사항을 눈에 띄게 표시함으로써 데이터 세트 간의 변화를 확인할 수 있습니다.
두 개의 데이터 세트로 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
옵션으로 이전 막대와 새 막대의 상대적 너비를 제어할 수 있습니다.