차트 스타일 지정

Earth Engine 코드 편집기의 ui.Chart 모듈에서 생성된 차트는 .setOptions() 메서드를 사용하여 스타일을 지정할 수 있습니다. 이 메서드는 구성 옵션의 클라이언트 측 JavaScript 객체를 입력으로 사용합니다. 각 차트 유형의 구성 옵션은 각 Google 차트 문서의 구성 옵션 섹션에 제공됩니다(예: 선 차트).

구성 옵션 예시

여기서는 맞춤 차트 스타일이 ui.Chart.image.doySeries 예에 적용됩니다. 구성 옵션 객체의 형식을 지정하고 ee.Chart에 적용하는 방법에 관한 가이드를 제공합니다.

// Import the example feature collection and subset the glassland feature.
var grassland = ee.FeatureCollection('projects/google/charts_feature_example')
                    .filter(ee.Filter.eq('label', 'Grassland'));

// Load MODIS vegetation indices data and subset a decade of images.
var vegIndices = ee.ImageCollection('MODIS/006/MOD13A1')
                     .filter(ee.Filter.date('2010-01-01', '2020-01-01'))
                     .select(['NDVI', 'EVI']);

// Set chart style properties.
var chartStyle = {
  title: 'Average Vegetation Index Value by Day of Year for Grassland',
  hAxis: {
    title: 'Day of year',
    titleTextStyle: {italic: false, bold: true},
    gridlines: {color: 'FFFFFF'}
  },
  vAxis: {
    title: 'Vegetation index (x1e4)',
    titleTextStyle: {italic: false, bold: true},
    gridlines: {color: 'FFFFFF'},
    format: 'short',
    baselineColor: 'FFFFFF'
  },
  series: {
    0: {lineWidth: 3, color: 'E37D05', pointSize: 7},
    1: {lineWidth: 7, color: '1D6B99', lineDashStyle: [4, 4]}
  },
  chartArea: {backgroundColor: 'EBEBEB'}
};

// Define the chart.
var chart =
    ui.Chart.image
        .doySeries({
          imageCollection: vegIndices,
          region: grassland,
          regionReducer: ee.Reducer.mean(),
          scale: 500,
          yearReducer: ee.Reducer.mean(),
          startDay: 1,
          endDay: 365
        })
        .setSeriesNames(['EVI', 'NDVI']);

// Apply custom style properties to the chart.
chart.setOptions(chartStyle);

// Print the chart to the console.
print(chart);

해결 방법

다음 예에서는 질문에 답변하는 데 관련된 구성 옵션만 정의하는 JavaScript 객체를 제공합니다. 필요에 따라 객체에 옵션을 추가하고 결과를 ee.Chart의 .setOptions() 메서드에 전달합니다.

차트 제목을 설정할 수 있나요?

{
  title: 'The Chart Title'
}

차트 제목을 숨기시겠습니까?

{
  titlePosition: 'none'
}

범례를 숨기려면 어떻게 해야 하나요?

{
  legend: {position: 'none'}
}

축 한도를 정의할 수 있나요?

{
  hAxis: {  // x-axis
    viewWindow: {min: 10, max: 100}
  },
  vAxis: {  // y-axis
    viewWindow: {min: -10, max: 50}
  }
}

기호 크기와 색상을 설정할 수 있나요?

최상위 속성을 사용하여 모든 계열의 기호 속성을 설정할 수 있습니다. 예를 들면 다음과 같습니다.

{
  colors: ['blue'],
  pointSize: 10,
  lineWidth: 5,
  lineDashStyle: [4, 4],
  pointShape: 'diamond'  // 'circle', 'triangle', 'square', 'star', or 'polygon'
}

또는 선택한 계열의 속성을 설정합니다.

{
  series: {
    0: {lineWidth: 3, color: 'yellow', pointSize: 7},
    2: {lineWidth: 7, color: '1D6D99', lineDashStyle: [4, 4]}
  }
}

계열의 길이와 순서에 해당하는 색상 배열을 제공하여 개별 계열의 색상을 설정할 수도 있습니다.

{
  colors: ['blue', 'yellow', 'red']
}

범례에서 시리즈를 숨기려면 어떻게 해야 하나요?

{
  series: {
    0: {visibleInLegend: false},  // hides the 1st series in the legend
    2: {visibleInLegend: false}  // hides the 3rd series in the legend
  }
}

선 차트에 점을 표시할 수 있나요?

모든 계열의 점을 표시합니다.

{
  pointSize: 10
}

또는 개별 시리즈의 경우:

{
  series: {
    0: {pointSize: 10},  // shows size 10 points for the 1st line series
    2: {pointSize: 10}  // shows size 10 points for the 3rd line series
  }
}

점 차트에 선 표시

모든 계열의 선을 표시합니다.

{
  lineWidth: 10
}

또는 개별 시리즈의 경우:

{
  series: {
    0: {lineWidth: 10},  // shows size 10 lines for the 1st point series
    2: {lineWidth: 10}  // shows size 10 lines for the 3rd point series
  }
}

로그 배율을 축에 적용할 수 있나요?

{
  hAxis: {logScale: true},  // x-axis
  vAxis: {logScale: true}  // y-axis
}

선에 보간 함수를 적용할 수 있나요?

모든 선 시리즈에 보간 함수를 적용합니다.

{
  curveType: 'function'
}

또는 개별 시리즈:

{
  series: {
    0: {curveType: 'function'},  // apply smoothing function to 1st line series
    2: {curveType: 'function'}  // apply smoothing function to 3rd line series
  }
}

차트 축을 확대/축소하고 화면 이동할 수 있나요?

각 Google 차트 유형의 explorer 옵션을 참고하세요. 다음을 사용하면 두 축에서 모두 확대/축소 및 화면 이동이 허용됩니다.

{
  explorer: {}
}

화면 이동 및 확대/축소를 단일 축으로 제한합니다.

{
  explorer: {axis: 'vertical'}  // or 'horizontal'
}

점 기호 불투명도 설정

{
  dataOpacity: 0.5
}

축을 회전할 수 있나요?

{
  orientation: 'vertical'  // or 'horizontal'
}

텍스트 스타일을 설정할 수 있나요?

텍스트 스타일 지정 옵션은 다음 JavaScript 객체에 따라 지정됩니다.

var textStyle = {
  color: 'grey',
  fontName: 'arial',
  fontSize: 14,
  bold: true,
  italic: false
}

x축 텍스트 스타일을 설정합니다.

{
  hAxis: {
    textStyle: textStyle,  // tick label text style
    titleTextStyle: textStyle  // axis title text style
  }
}

y축 텍스트 스타일을 설정합니다.

{
  vAxis: {
    textStyle: textStyle,  // tick label text style
    titleTextStyle: textStyle  // axis title text style
  }
}

범례 텍스트 스타일을 설정합니다.

{
  legend: {textStyle: textStyle}
}

모든 텍스트 요소의 글꼴 이름과 크기를 설정할 수도 있습니다.

{
  fontName: 'arial',
  fontSize: 14
}

차트 배경 색상을 설정할 수 있나요?

{
  chartArea: {backgroundColor: 'EBEBEB'}
}

차트 그리드 선 색상을 설정할 수 있나요?

{
  hAxis: {  // x-axis
    gridlines: {color: 'FFFFFF'}
  },
  vAxis: {  // y-axis
    gridlines: {color: 'FFFFFF'}
  }
}

격자선 삭제

{
  hAxis: {  // x-axis
    gridlines: {count: 0}
  },
  vAxis: {  // y-axis
    gridlines: {count: 0}
  }
}

축 값 라벨 형식을 지정할 수 있나요?

축 값 라벨 형식 옵션의 전체 목록은 이 가이드를 참고하세요.

{
  hAxis: {  // x-axis
    format: 'short'  // applies the 'short' format option
  },
  vAxis: {  // y-axis
    format: 'scientific'  // applies the 'scientific' format option
  }
}

null Y축 값을 보간할 수 있나요?

선 차트에서 Y축 값이 누락되거나 null이면 줄바꿈이 발생할 수 있습니다. interpolateNulls: true를 사용하여 연속 선을 그립니다.

{
  interpolateNulls: true
}

추세선을 추가하시겠습니까?

분산형, 막대, 열, 선 차트에 추세선이 자동으로 생성될 수 있습니다. 자세한 내용은 이 페이지를 참고하세요.

{
  trendlines: {
    0: {  // add a trend line to the 1st series
      type: 'linear',  // or 'polynomial', 'exponential'
      color: 'green',
      lineWidth: 5,
      opacity: 0.2,
      visibleInLegend: true,
    }
  }
}