[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

원형 차트

원형 차트는 단일 데이터 계열의 각 항목 크기를 전체 대비 비율로 표시하는 데 널리 사용됩니다. 데이터 포인트는 전체 파이의 백분율로 표시되며, 데이터를 비율이나 점유율로 시각화하고자 할 때 이상적입니다.

워크시트의 열이나 행에 정렬된 데이터는 원형 차트에 플로팅될 수 있습니다. 일반적으로 원형 차트는 원 모양으로 구성되어 있으며, 각 조각은 전체에서 해당 범주가 차지하는 비율을 나타냅니다. 이러한 차트는 일반적으로 하나의 데이터 그룹만을 표시합니다.

SpreadJS는 다음과 같은 유형의 원형 차트를 지원합니다. 아래 예시에서는 다양한 브라우저의 시장 점유율(백분율)을 서로 다른 원형 차트 유형으로 시각화한 모습이 보여집니다.

원형 차트

이 차트는 단일 데이터 계열을 원형 구조로 표시하며, 각 조각은 서로 다른 범주를 나타냅니다.

아래 이미지는 원형 차트의 예시입니다:



다음 코드 샘플은 스프레드시트에 원형 차트를 추가하고 일부 차트 요소를 사용자 지정하는 방법을 보여줍니다.

// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });
// activesheet 가져오기
var activeSheet = spread.getSheet(0);
// 데이터 준비
var dataArray = [
  ["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'],
  ["2014", 0.4966, 0.1801, 0.2455, 0.0470, 0.0, 0.0150, 0.0158],
  ["2015", 0.5689, 0.1560, 0.1652, 0.0529, 0.0158, 0.0220, 0.0192],
  ["2016", 0.6230, 0.1531, 0.1073, 0.0464, 0.0311, 0.0166, 0.0225],
  ["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246]
];
activeSheet.setArray(0, 0, dataArray);
// 파이 차트 추가
var chart = activeSheet.charts.add('PieChart', GC.Spread.Sheets.Charts.ChartType.pie, 0, 50, 600, 400, "A1:H2");
var dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = true;
dataLabels.format = "0.00%";
var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels.position = dataLabelPosition.bestFit;
chart.dataLabels(dataLabels);
var title = chart.title();
title.text = "Browser Market Share";
title.fontSize = 18;
chart.title(title);
chart.legend({ position: GC.Spread.Sheets.Charts.LegendPosition.right });
var seriesItem = chart.series().get(0);
seriesItem.backColor = 'rgb(91, 155, 213),rgb(237, 125, 49),rgb(165, 165, 165),rgb(255, 192, 0),rgb(68, 114, 196),rgb(112, 173, 71),rgb(255,20,128)';
seriesItem.border.width = 3;
chart.series().set(0, seriesItem);
// 도넛 차트 추가
var chart = activeSheet.charts.add('DoughnutChart', GC.Spread.Sheets.Charts.ChartType.doughnut, 0, 100, 600, 320, "A1:H5");
var series = chart.series().get();
for (var i = 0; i < series.length; i++) {
  var seriesItem = series[i];
  seriesItem.backColor = 'rgb(91, 155, 213),rgb(237, 125, 49),rgb(165, 165, 165),rgb(255, 192, 0),rgb(68, 114, 196),rgb(112, 173, 71),rgb(255,20,128)';
  chart.series().set(i, seriesItem);
}
chart.legend({ position: GC.Spread.Sheets.Charts.LegendPosition.right });
var title = chart.title();
title.text = "Browser Market Share";
title.fontSize = 18;
chart.title(title);

도넛형 차트

이 차트는 여러 데이터 계열을 동시에 표시할 수 있으며, 각 도넛 고리는 하나의 데이터 계열을 나타냅니다.

스프레드시트에 도넛형 차트를 삽입하면, 기본적으로 중심 구멍의 크기는 기본값으로 설정됩니다. doughnutHoleSize 속성 값을 0에서 0.9 사이로 설정하여 구멍 크기를 조정할 수 있습니다. 이 속성을 사용하면 도넛형 차트에서 더 넓은 조각을 표시할 수 있어, 범주 이름, 값, 백분율 등의 데이터 레이블을 보다 잘 표시할 수 있습니다.

아래 이미지는 도넛형 차트의 예시를 보여줍니다:



다음 코드 샘플은 스프레드시트에 도넛형 차트를 추가하고 일부 차트 요소를 사용자 지정하는 방법을 보여줍니다.

Ask ChatGPT

$(document).ready(function () {
// Spread 초기화
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });
// activesheet 가져오기
  var activeSheet = spread.getSheet(0);
// 데이터 준비
  var dataArray = [
    ["", 'Samsung', 'Apple', 'Huawei', 'OPPO', 'Vivo', 'Others'],
    ["Sales", 321, 215, 160, 112, 100, 638]
  ];
  // 차트 데이터 설정
  activeSheet.setArray(0, 0, dataArray);
  // 도넛 차트 추가
  var chart = activeSheet.charts.add('DoughnutChart', GC.Spread.Sheets.Charts.ChartType.doughnut, 10, 80, 600, 320, "A1:G2");
  var series = chart.series().get();
  for (var i = 0; i < series.length; i++) {
    var seriesItem = series[i];
    seriesItem.backColor = 'rgb(91, 155, 213),rgb(237, 125, 49),rgb(165, 165, 165),rgb(255, 192, 0),rgb(68, 114, 196),rgb(112, 173, 71),rgb(255,20,128)';
    chart.series().set(i, seriesItem);
  }
  // 도넛 HoleSize 설정
  series.doughnutHoleSize = 0.4;
  chart.series().set(0, series);
  // 데이터 레이블 표ㅅ시
  var dataLabels = chart.dataLabels();
  dataLabels.showValue = false;
  dataLabels.showSeriesName = false;
  dataLabels.showCategoryName = true;
  dataLabels.showPercentage = true;
  var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
  dataLabels.position = dataLabelPosition.Center;
  chart.dataLabels(dataLabels);
  // 시리즈 배경색 설정
  var s = chart.series().get(0);
  //s.backColor = "accent 1 0,accent 2 0,accent 3 0,accent 4 0, accent 5 0, accent 6 0";
  s.backColor = "#43B7C2, #FFAD48, #50E3C2, #B5D63D, #EF879B, #C600CC";
  chart.series().set(0, s)
  // 범례 표시
  chart.legend({ position: GC.Spread.Sheets.Charts.LegendPosition.right });
  var title = chart.title();
  title.text = "Best-selling Mobile Phone Brands of 2019";
  title.fontSize = 18;
  chart.title(title);
});