선버스트 차트

선버스트 차트는 계층 구조 데이터를 표시하는 데 이상적입니다. 계층 구조의 각 수준은 가장 안쪽에 있는 원을 계층 구조의 최상위 수준으로 하는 하나의 링 또는 원으로 표시됩니다. 계층 구조 데이터가 없는 선버스트 차트(1개의 범주 수준)는 도넛형 차트와 모습이 유사합니다. 이와 다르게 범주 수준이 여러 개인 선버스트 차트는 외부 링이 내부 링과 어떤 관련성을 갖고 있는지를 보여줍니다. 선버스트 차트는 하나의 링이 관련성을 가진 여러 요소로 분류되는 방법을 보여주는 데 가장 효과적입니다.

SpreadJS는 선버스트 차트를 지원합니다. 차트 유형을 가져오려면 GC.Spread.Sheets.Charts.ChartType.sunburst 속성을 사용하십시오. Spread에 선버스트 차트를 추가하고 차트 API를 사용하여 스타일을 변경할 수 있습니다..
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2}); initSpread(spread); }; function initSpread(spread) { var sheets = spread.sheets; spread.suspendPaint(); // custom sheets style setSheet(sheets); setData(sheets[0], 'sunburstChart'); initSunburst(sheets[0], GC.Spread.Sheets.Charts.ChartType.sunburst, 'sunburstChart'); setData(sheets[1], 'customStyle'); var customSunburstChart = initSunburst(sheets[1], GC.Spread.Sheets.Charts.ChartType.sunburst, 'customStyle Chart'); // custom sunburst chart style setChartArea(customSunburstChart); setTitle(customSunburstChart); setDataPoints(customSunburstChart); spread.resumePaint(); } function setSheet(sheets) { var columnWidths = [20, 70, 100, 80, 120]; for (var i = 0; i < sheets.length; i++) { sheets[i].options.gridline.showHorizontalGridline = false; sheets[i].options.gridline.showVerticalGridline = false; sheets[i].getRange(1, 1, 17, 4) .hAlign(GC.Spread.Sheets.HorizontalAlign.center) .setBorder(new GC.Spread.Sheets.LineBorder('black', GC.Spread.Sheets.LineStyle.thin), {all: true}); sheets[i].getRange(1, 1, 1, 4).font('bold normal 10pt Arial'); for (var j = 0; j < columnWidths.length; j++) { sheets[i].setColumnWidth(j, columnWidths[j]); } } } function initSunburst(sheet, chartType, chartName) { sheet.resumePaint(); return sheet.charts.add(chartName, chartType, 450, 0, 400, 400, "B2:E18"); } function setChartArea(chart) { var area = chart.chartArea(); area.backColor = '#fff'; area.backColorTransparency = 0; area.color = '#000' chart.chartArea(area) } function setTitle(chart) { var title = chart.title(); title.text = 'World Population'; chart.title(title); } function setDataPoints(chart) { var dataPoints = chart.series().dataPoints(); var fillColors = ['#4472c4', '#a5a5a5', '#ffc000', '#ed7d31']; fillColors.forEach(function (color, index) { var dataPoint = dataPoints.get(index); dataPoint.fillColor = color; dataPoint.transparency = 0; // 0~1 dataPoints.set(index, dataPoint); }) } function setData(sheet, sheetName) { sheet.name(sheetName); sheet.suspendPaint(); var dataArray = [ ['Region', 'Subregion', 'Country', 'Population'], ['Asia', 'Southern', 'India', 1354051854], [, , 'Pakistan', 200813818], [, , 'Bangladesh', 166368149], [, , 'Others', 170220300], [, 'Eastern', 'China', 1415045928], [, , 'Japan', 127185332], [, , 'Others', 111652273], [, 'South-Eastern', , 655636576], [, 'Western', , 272298399], [, 'Central', , 71860465], ['Africa', 'Eastern', , 433643132], [, 'Western', , 381980688], [, 'Northern', , 237784677], [, 'Others', , 234512021], ['Europe', , , 742648010], ['Others', , , 1057117703] ]; sheet.setArray(1, 1, dataArray); }
<!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 class="sample-tutorial"> <div id="ss" class="sheet-container"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sheet-container{ height: 100%; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }