SpreadJS는 radar, radarFilled 및 radarMarkers 방사형 차트를 지원합니다. GC.Spread.Sheets.Charts.ChartType.radar 속성을 사용하여 차트 유형을 가져올 수 있습니다.
예를 들어 radar 차트 유형을 삽입하고 차트 API를 사용하여 차트 스타일을 변경할 수 있습니다.
아래 예제같이 radaMarkers에서 표식의 색, 셰이프, 테두리를 사용자 정의할 수 있습니다.
radar 및 radarMarkers 유형의 차트는 데이터 값을 나타내기 위해 표식이 있거나 없는 상태로 표시할 수 있습니다.
radarFilled 유형의 차트는 영역이 채워진 상태로 표시할 수 있습니다.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {sheetCount: 3});
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
var chartType = [
{
type: GC.Spread.Sheets.Charts.ChartType.radar,
desc: 'radar'
},
{
type: GC.Spread.Sheets.Charts.ChartType.radarFilled,
desc: 'radarFilled'
},
{
type: GC.Spread.Sheets.Charts.ChartType.radarMarkers,
desc: 'radarMarkers'
}
];
spread.suspendPaint();
var sheets = spread.sheets;
for (var i = 0; i < chartType.length; i++) {
var sheet = sheets[i];
initSheet(sheet, chartType[i].desc);
initChart(sheet, chartType[i].type);
customDataAreaStyle(sheet);
}
spread.options.tabStripRatio = 0.8;
spread.resumePaint();
}
function initSheet(sheet, sheetName) {
sheet.name(sheetName);
// prepare data for chart
var dataArray = [
['', 'Bob', 'David'],
['Initiative', 4, 3],
['Innovation', 4, 3],
['Integrity', 3, 4],
['Learning Capability', 3, 5],
['Punctuality', 2, 5],
['Team Player', 3, 4]
];
sheet.setArray(1, 1, dataArray);
}
function customDataAreaStyle(sheet) {
sheet.setColumnWidth(0, 20);
for (var i = 1; i < 4; i++) {
sheet.setColumnWidth(i, 100);
}
sheet.options.gridline.showHorizontalGridline = false;
sheet.options.gridline.showVerticalGridline = false;
sheet.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});
sheet.getRange(1, 2, 1, 3).font('bold normal 10pt Arial');
sheet.getRange(2, 1, 6, 1).font('bold normal 10pt Arial');
}
function initChart(sheet, chartType) {
//add chart
var chart = sheet.charts.add(sheet.name() + ' Chart', chartType, 250, 0, 500, 410, '$B$2:$D$8');
// custom chart style
changeChartLegend(chart);
changeChartArea(chart);
changeChartTitle(chart);
changeChartAxes(chart);
changeChartSeries(chart);
if (chartType === GC.Spread.Sheets.Charts.ChartType.radarMarkers) {
changeMarker(chart);
} else {
changeChartDataLabels(chart);
}
}
function changeChartLegend(chart) {
var legend = chart.legend();
legend.visible = true;
legend.position = GC.Spread.Sheets.Charts.LegendPosition.bottom;
chart.legend(legend);
}
function changeChartArea(chart) {
var chartArea = chart.chartArea();
chartArea.fontSize = 14;
chart.chartArea(chartArea);
}
function changeChartDataLabels(chart) {
var dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
dataLabels.position = GC.Spread.Sheets.Charts.DataLabelPosition.above;
chart.dataLabels(dataLabels);
}
function changeChartTitle(chart) {
var title = chart.title();
title.text = 'Reports';
title.fontSize = 22;
title.fontFamily = 'Calibri normal';
chart.title(title);
}
function changeChartAxes(chart) {
var axes = chart.axes();
axes.primaryCategory.style.color = '#666';
axes.primaryValue.majorGridLine.color = '#ccc';
chart.axes(axes);
}
function changeChartSeries(chart) {
var series = chart.series();
var bobSeries = series.get(0);
bobSeries.border.color = 'skyblue';
bobSeries.backColor = 'skyblue';
bobSeries.backColorTransparency = '0.5';
series.set(0, bobSeries);
var davidSeries = series.get(1);
davidSeries.border.color = 'orange';
davidSeries.backColor = 'orange';
davidSeries.backColorTransparency = '0.5';
series.set(1, davidSeries);
}
function changeMarker(chart) {
var series = chart.series();
var bobSeries = series.get(0);
bobSeries.symbol.shape = 1;
bobSeries.symbol.size = 20;
series.set(0, bobSeries);
var davidSeries = series.get(1);
davidSeries.symbol.shape = 9;
davidSeries.symbol.size = 11;
series.set(1, davidSeries);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ko-kr"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="ss" class="sample-tutorial"></div></body>
</html>
.sample-tutorial {
height: 100%;
width: 100%;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}