방사형 차트

방사형 차트는 행과 열에 있는 다변량 데이터를 2차원 그래픽 형식으로 표현할 수 있는 차트입니다.

SpreadJS는 스프레드시트에서 방사형 차트를 지원하여 사용자가 동적인 데이터 비교를 수행하고 포괄적인 정보 분석을 가능하게 합니다. 또한, 두 개 이상의 데이터 시리즈의 총합 값을 심층적으로 평가할 수 있어 정보를 더 쉽고 빠르게 시각화하고 조작할 수 있습니다.

방사형 차트 사용하기

방사형 차트는 일반적으로 여러 특성에 걸쳐 두 개 이상의 항목을 비교할 때 사용됩니다. 방사형 차트에서는 세 개 이상의 정량적 변수가 중심점에서 방사형으로 뻗는 축 위에 각각 표시됩니다. 시리즈 값은 선으로 연결되며, 축의 상대적 위치나 각도는 보통 일정하지 않습니다.

SpreadJS에서는 다음 세 가지 유형의 방사형 차트를 지원합니다:

기본 방사형 차트
채워진 방사형 차트
표식이 있는 방사형 차트

예제

아래 예제에서는 두 학생(리사와 팀)의 여섯 과목(수학, 영어, 역사, 생물학, 지리, 동물학)에 대한 시험 점수 분석이 서로 다른 유형의 방사형 차트로 시각화되어 있습니다:

기본 방사형 차트

아래 이미지는 두 학생의 시험 점수 분석을 기본 방사형 차트로 나타낸 것으로, 각 학생은 서로 다른 선 색상으로 강조되어 있습니다:

채워진 방사형 차트

아래 이미지는 두 학생의 시험 점수 분석을 채워진 방사형 차트로 나타낸 것으로, 각 학생은 서로 다른 색상의 영역으로 강조되어 있습니다:

표식이 있는 방사형 차트

아래 이미지는 두 학생의 시험 점수 분석을 표식이 있는 방사형 차트로 나타낸 것으로, 각 과목별 점수는 표식으로 표시되며 각 학생은 서로 다른 선 색상으로 강조되어 있습니다:

다음 코드는 두 학생의 점수 분석을 위해 기본 방사형 차트, 채워진 방사형 차트, 표식이 있는 방사형 차트를 워크시트에 생성하는 방법을 보여줍니다.

// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });
// activesheet 가져오기
var activeSheet = spread.getSheet(0);
// 데이터 준비 
var dataArray =
[
    ['', 'Lisa', 'Tim'],
    ['Mathematics', 87, 64],
    ['English', 79, 59],
    ['History ', 58, 75],
    ['Biology', 64, 96],
    ['Geography', 49, 85],
    ['Zoology', 64, 83]
];
activeSheet.setArray(1, 1, dataArray);
activeSheet.setColumnWidth(0, 20);
for (var i = 1; i < 4; i++) {
    activeSheet.setColumnWidth(i, 100);
}
activeSheet.options.gridline.showHorizontalGridline = false;
activeSheet.options.gridline.showVerticalGridline = false;
activeSheet.getRange(1, 1, 7, 3)
    .hAlign(GC.Spread.Sheets.HorizontalAlign.center)
    .setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin),
        { all: true });
activeSheet.getRange(1, 2, 1, 3).font('bold normal 10pt Arial');
activeSheet.getRange(2, 1, 6, 1).font('bold normal 10pt Arial');

// 방사형 차트 추가
// 1 - radar
// 2 - radarFilled
// 3 - radarMarkers
var chart = activeSheet.charts.add('RadarChart', GC.Spread.Sheets.Charts.ChartType.radar, 250, 0, 500, 410, '$B$2:$D$7');
var legend = chart.legend();
legend.visible = true;
legend.position = GC.Spread.Sheets.Charts.LegendPosition.bottom;
chart.legend(legend);

var chartArea = chart.chartArea();
chartArea.fontSize = 14;
chart.chartArea(chartArea);

var dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
dataLabels.position = GC.Spread.Sheets.Charts.DataLabelPosition.above;
chart.dataLabels(dataLabels);

var title = chart.title();
title.text = 'Test Score Analysis';
title.fontSize = 22;
title.color = "#b20000";
title.fontFamily = 'Cambria';
chart.title(title);

var axes = chart.axes();
axes.primaryCategory.style.color = '#000000';
axes.primaryValue.majorGridLine.color = '#ccc';
chart.axes(axes);

var series = chart.series();
var lisaSeries = series.get(0);
lisaSeries.border.color = 'skyblue';
lisaSeries.backColor = 'skyblue';
lisaSeries.backColorTransparency = '0.5';
series.set(0, lisaSeries);
var timSeries = series.get(1);
timSeries.border.color = 'orange';
timSeries.backColor = 'orange';
timSeries.backColorTransparency = '0.5';
series.set(1, timSeries);

방사형 차트