간격

  1. 개요
  2. 선 간격
  3. 막대 간격
  4. 박스 간격
  5. 스틱 간격
  6. 포인트 간격
  7. 영역 간격
  8. 인터벌 스타일 결합

개요

Google 차트는 계열 주위에 간격을 표시할 수 있습니다. 값 주변의 신뢰 구간, 최솟값 및 최댓값, 백분위수 샘플링 또는 계열 주변의 다양한 여백을 필요로 하는 다른 모든 것을 표시하는 데 사용할 수 있습니다.

간격에는 선, 막대, 상자, 막대, 점, 면적의 6가지 스타일이 있습니다. 아래에서 각각의 예를 확인할 수 있습니다. 각 예에서는 간격 없이 동일한 데이터 세트를 사용합니다.

위의 차트는 단순하며, 중요도가 동일한 7개의 연속된 데이터가 있습니다. 다음 섹션에서는 첫 번째 계열이 기본 계열이고 다른 6개 계열이 인터벌을 통해 비교된다고 가정합니다.

선 간격

선 간격은 여러 실험의 분산을 나타내기 위해 사용되기도 합니다. 다음 차트는 기본 계열과 그 주변의 간격을 보여줍니다.

 
<html>
  <head>
    <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 data = new google.visualization.DataTable();
        data.addColumn('number', 'x');
        data.addColumn('number', 'values');
        data.addColumn({id:'i0', type:'number', role:'interval'});
        data.addColumn({id:'i1', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
        data.addColumn({id:'i2', type:'number', role:'interval'});
  
        data.addRows([
            [1, 100, 90, 110, 85, 96, 104, 120],
            [2, 120, 95, 130, 90, 113, 124, 140],
            [3, 130, 105, 140, 100, 117, 133, 139],
            [4, 90, 85, 95, 85, 88, 92, 95],
            [5, 70, 74, 63, 67, 69, 70, 72],
            [6, 30, 39, 22, 21, 28, 34, 40],
            [7, 80, 77, 83, 70, 77, 85, 90],
            [8, 100, 90, 110, 85, 95, 102, 110]]);
  
        // The intervals data as narrow lines (useful for showing raw source data)
        var options_lines = {
            title: 'Line intervals, default',
            curveType: 'function',
            lineWidth: 4,
            intervals: { 'style':'line' },
            legend: 'none'
        };
  
        var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
        chart_lines.draw(data, options_lines);
      }
    </script>
  </head>
  <body>
    <div id="chart_lines" style="width: 900px; height: 500px;"></div>
  </body>
</html>

위의 데이터에서 세 가지 식별자(i0, i2, i3)가 보조 계열에 연결된 것을 확인할 수 있습니다. 이러한 요소를 사용하여 시리즈의 스타일을 다르게 지정할 수 있습니다. 아래에서는 다양한 색상과 두께를 제공합니다.

참고: 일반적으로 위와 같이 ID를 재사용하는 것은 좋지 않습니다. i2를 4번 사용합니다. 올바르게 작동하지만 향후 이 동작이 변경될 수 있습니다.

유일한 차이점은 옵션입니다.

    var options_lines = {
        title: 'Line intervals, tailored',
        lineWidth: 4,
        curveType:'function',
        interval: {
            'i0': { 'style':'line', 'color':'#D3362D', 'lineWidth': 0.5 },
            'i1': { 'style':'line', 'color':'#F1CA3A', 'lineWidth': 1 },
            'i2': { 'style':'line', 'color':'#5F9654', 'lineWidth': 2 },
        },
        legend: 'none',
    };

막대 간격

막대 간격은 데이터 주위에 오류 막대를 만듭니다. 간격의 첫 번째와 마지막 열은 도메인 축과 평행한 넓은 막대로 그려지고, 내부 열은 더 짧은 '틱'으로 그려집니다. '막대'가 넓은 막대를 연결하기 위해 추가됩니다 (두 막대의 값이 동일하면 pointSize 옵션이 0이 아닌 한 막대가 점으로 렌더링됩니다).

첫 번째와 마지막 열에 해당하는 가로 막대의 너비는 intervals.barWidth로 제어되고, 내부 열에 해당하는 가로 막대의 너비는 intervals.shortBarWidth로 제어됩니다. 이를 생략하면 위와 같은 차트와 아래 옵션이 표시됩니다.

    var options_bars = {
        title: 'Bars, default',
        curveType: 'function',
        series: [{'color': '#D9544C'}],
        intervals: { style: 'bars' },
        legend: 'none',
    };

박스 간격

상자 간격은 데이터 테이블의 열을 중첩된 직사각형 집합으로 렌더링합니다. 첫 번째와 마지막 열은 가장 바깥쪽 직사각형을 형성하고 내부 열은 포함된 상자 내에서 더 어두운 직사각형으로 렌더링됩니다.

상자 간격을 지정하는 방법은 다음과 같습니다.

    var options = {
        series: [{'color': '#1A8763'}],
        intervals: { style: 'boxes' },
        legend: 'none',
    };

intervals.lineWidth 및 intervals.barWidth 옵션을 사용하여 상자를 더 눈에 띄게 만들 수 있습니다.

관련 옵션:

    var options = {
        title:'Boxes, thick',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#1A8763'}],
        intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
        legend: 'none',
    };

스틱 간격

스틱 간격은 열 쌍을 타겟 축과 평행한 막대 세트로 표시합니다. 높이가 0인 스틱은 점으로 렌더링되며 pointSize 옵션을 0으로 설정하여 표시하지 않을 수 있습니다.

'sticks'의 style로 만들 수 있습니다.

    var options_sticks = {
        title:'Sticks, default',
        curveType:'function',
        series: [{'color': '#E7711B'}],
        intervals: { style: 'sticks' },
        legend: 'none',
    };

포인트 간격

점 간격은 간격 데이터를 작은 원으로 표시합니다.

점 크기는 intervals.pointSize 옵션으로 제어할 수 있습니다. 여기서는 2입니다.

    var options_points = {
        title:'Points, default',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#D3362D'}],
        intervals: { 'style':'points', pointSize: 2 },
        legend: 'none',
    };

8에서 다음과 같이 표시됩니다.

영역 간격

영역 간격은 간격 데이터를 중첩된 음영 영역의 집합으로 렌더링합니다. 열 쌍의 중첩은 짝수의 열이 필요하다는 점을 제외하면 상자 간격과 비슷합니다.

이렇게 하려면 style를 'area'로 설정하면 됩니다.

    var options = {
        title:'Area, default',
        curveType:'function',
        series: [{'color': '#F1CA3A'}],
        intervals: { 'style':'area' },
        legend: 'none',
    };

인터벌 스타일 결합

한 차트 내에서 간격 스타일을 결합하여 더욱 맞춤설정할 수 있습니다.

다음은 영역 간격과 막대 간격을 결합한 차트입니다.

위 차트에서 i0 및 i1 태그가 지정된 간격에 'bars'의 style를 지정하고 i2에 'area' 스타일을 지정합니다. 그런 다음 pointSize를 사용하여 막대를 제한합니다.

    var options = {
        title:'Bar/area interval chart',
        curveType:'function',
        intervals: { 'color':'series-color' },
        interval: {
            'i0': { 'color': '#4374E0', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
            'i1': { 'color': '#E49307', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
            'i2': { 'style':'area', 'curveType':'function', 'fillOpacity':0.3 }},
        legend: 'none',
    };

다음은 막대로 표시된 i2 간격의 막대 간격 선 차트입니다.

    var options = {
        title:'Sticks, horizontal',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#E7711B'}],
        intervals: { 'lineWidth': 4, 'barWidth': 0.5 },
        interval: {
            'i2': { 'style':'sticks', 'color':'grey', 'boxWidth': 2.5,
            'lineWidth': 1 }
        },
        legend: 'none',
    };

다음은 불투명도가 낮은 상자를 사용하여 선택된 간격을 백그라운드에 배치하는 간격 선 차트입니다.

    // Focus is the error bars, but boxes are visible in the background.
    var options_boxes_background = {
        title:'Background boxes',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#1A8763'}],
        intervals: { 'lineWidth':2, 'barWidth': 0.5 },
        interval: {
            'i2': { 'style':'boxes', 'color':'grey', 'boxWidth': 2.5,
            'lineWidth': 0, 'fillOpacity': 0.2 }
        },
        legend: 'none',
    };

boxWidth와 함께 한 간격에 낮은 불투명도 'points' 스타일을 지정하여 '점과 수염' 간격 차트를 만들 수 있습니다.

    var options = {
        title:'Points and whiskers',
        curveType:'function',
        lineWidth: 4,
        series: [{'color': '#D3362D'}],
        intervals: { 'lineWidth':2, 'barWidth': 0.5 },
        interval: {
            'i2': { 'style':'points', 'color':'grey', 'pointSize': 10,
            'lineWidth': 0, 'fillOpacity': 0.3 }
        },
        legend: 'none',
    };

박스 플롯

마지막으로 위의 '점 및 수염' 차트를 기반으로 상자와 막대 간격을 사용하여 기본 상자 플롯 차트를 만들 수 있습니다.

옵션
      var options = {
          title:'Box Plot',
          height: 500,
          legend: {position: 'none'},
          hAxis: {
            gridlines: {color: '#fff'}
          },
          lineWidth: 0,
          series: [{'color': '#D3362D'}],
          intervals: {
            barWidth: 1,
            boxWidth: 1,
            lineWidth: 2,
            style: 'boxes'
          },
          interval: {
            max: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            },
            min: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            }
          }
      };
전체 스크립트 본문
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawBoxPlot);

    function drawBoxPlot() {

      var array = [
        ['a', 100, 90, 110, 85, 96, 104, 120],
        ['b', 120, 95, 130, 90, 113, 124, 140],
        ['c', 130, 105, 140, 100, 117, 133, 139],
        ['d', 90, 85, 95, 85, 88, 92, 95],
        ['e', 70, 74, 63, 67, 69, 70, 72],
        ['f', 30, 39, 22, 21, 28, 34, 40],
        ['g', 80, 77, 83, 70, 77, 85, 90],
        ['h', 100, 90, 110, 85, 95, 102, 110]
      ];

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'x');
      data.addColumn('number', 'series0');
      data.addColumn('number', 'series1');
      data.addColumn('number', 'series2');
      data.addColumn('number', 'series3');
      data.addColumn('number', 'series4');
      data.addColumn('number', 'series5');
      data.addColumn('number', 'series6');

      data.addColumn({id:'max', type:'number', role:'interval'});
      data.addColumn({id:'min', type:'number', role:'interval'});
      data.addColumn({id:'firstQuartile', type:'number', role:'interval'});
      data.addColumn({id:'median', type:'number', role:'interval'});
      data.addColumn({id:'thirdQuartile', type:'number', role:'interval'});

      data.addRows(getBoxPlotValues(array));

      /**
       * Takes an array of input data and returns an
       * array of the input data with the box plot
       * interval data appended to each row.
       */
      function getBoxPlotValues(array) {

        for (var i = 0; i < array.length; i++) {

          var arr = array[i].slice(1).sort(function (a, b) {
            return a - b;
          });

          var max = arr[arr.length - 1];
          var min = arr[0];
          var median = getMedian(arr);

          // First Quartile is the median from lowest to overall median.
          var firstQuartile = getMedian(arr.slice(0, 4));

          // Third Quartile is the median from the overall median to the highest.
          var thirdQuartile = getMedian(arr.slice(3));

          array[i][8] = max;
          array[i][9] = min
          array[i][10] = firstQuartile;
          array[i][11] = median;
          array[i][12] = thirdQuartile;
        }
        return array;
      }

      /*
       * Takes an array and returns
       * the median value.
       */
      function getMedian(array) {
        var length = array.length;

        /* If the array is an even length the
         * median is the average of the two
         * middle-most values. Otherwise the
         * median is the middle-most value.
         */
        if (length % 2 === 0) {
          var midUpper = length / 2;
          var midLower = midUpper - 1;

          return (array[midUpper] + array[midLower]) / 2;
        } else {
          return array[Math.floor(length / 2)];
        }
      }

      var options = {
          title:'Box Plot',
          height: 500,
          legend: {position: 'none'},
          hAxis: {
            gridlines: {color: '#fff'}
          },
          lineWidth: 0,
          series: [{'color': '#D3362D'}],
          intervals: {
            barWidth: 1,
            boxWidth: 1,
            lineWidth: 2,
            style: 'boxes'
          },
          interval: {
            max: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            },
            min: {
              style: 'bars',
              fillOpacity: 1,
              color: '#777'
            }
          }
      };

      var chart = new google.visualization.LineChart(document.getElementById('box_plot'));

      chart.draw(data, options);
    }