방사형 차트

방사형 차트는 3개 이상의 차원을 표시하는 변수용입니다. 이 차트는 데이터 집합에서 각 변수가 차지하는 비중을 명확하고 시각적인 방식으로 표시하며, 더 주의를 기울여 유사한 차트를 비교할 수 있도록 합니다. 워크시트의 열 또는 행에 정렬된 데이터는 방사형 차트에 표시할 수 있습니다.

설명
app.js
index.html
styles.css

SpreadJS는 radar, radarFilled 및 radarMarkers 방사형 차트를 지원합니다. GC.Spread.Sheets.Charts.ChartType.radar 속성을 사용하여 차트 유형을 가져올 수 있습니다.

예를 들어 radar 차트 유형을 삽입하고 차트 API를 사용하여 차트 스타일을 변경할 수 있습니다.

     var chart = sheet.charts.add('radar', GC.Spread.Sheets.Charts.ChartType.radar, 0, 100, 400, 300, 'A1:D4')
     var series = chart.series().get(index ?)
    //You can set the parameter using the series index. If the parameter exists, get(index) will get the specific series information, If not, the get() will return an array and contain all series.
     var ser = series[0].backColor = 'red';
     chart.series().set(index, ser);

아래 예제같이 radaMarkers에서 표식의 색, 셰이프, 테두리를 사용자 정의할 수 있습니다.

    var seriesItem = chart.series().get(index ?);
    bobSeries.symbol.shape = 1 /** dash */;
    bobSeries.symbol.size = 20;
    bobSeries.symbol.fill = "red";
    bobSeries.symbol.border.size = 2;
    bobSeries.symbol.border.color = "rgb(127, 0, 127)";
    bobSeries.symbol.border.lineType = 7 /** sysDot */;
    series.set(index ?, seriesItem);

radar 및 radarMarkers 유형의 차트는 데이터 값을 나타내기 위해 표식이 있거나 없는 상태로 표시할 수 있습니다.

radarFilled 유형의 차트는 영역이 채워진 상태로 표시할 수 있습니다.

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; }