차트를 맞춤설정하는 방법

Google 차트 도구를 기본 설정으로 사용할 수 있습니다. 모든 맞춤설정은 선택사항이며 기본 설정은 즉시 사용 가능합니다. 하지만 웹페이지가 제공된 기본값과 상충하는 스타일을 채택하는 경우 차트를 쉽게 맞춤설정할 수 있습니다. 모든 차트에는 디자인과 분위기를 맞춤설정하는 다양한 옵션이 표시됩니다. 이 옵션은 차트의 draw() 메서드에 전달된 옵션 객체에서 이름:값 쌍으로 표현됩니다.

차트는 일반적으로 시각화에 적합한 맞춤 옵션을 지원합니다. 예를 들어 표 차트에서는 sortColumn 옵션을 사용하여 기본 정렬 열을 지정하고 원형 차트 시각화에서는 슬라이스 색상을 지정할 수 있는 colors 옵션을 지원합니다. 각 차트의 문서는 지원하는 옵션을 설명해야 합니다.

앞서 설명한 차트의 draw() 메서드에 두 번째 매개변수(선택사항)를 전달합니다. 각 차트에 해당하는 속성으로 객체를 만들어 옵션을 지정합니다.

다음 예는 이러한 모든 속성을 지정하는 옵션 객체를 만드는 방법을 보여줍니다.

var options = {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};

chart.draw(data, options);

다음은 이 코드로 만드는 차트입니다.

draw() 메서드 내에서 리터럴 옵션을 지정할 수도 있습니다.

chart.draw(data, {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
  is3D: true
});

다음은 이 코드로 만드는 차트입니다.

추가 정보