Sunburst Chart

The sunburst chart is ideal for displaying hierarchical data. Each level of the hierarchy is represented by one ring or circle with the innermost circle as the top of the hierarchy. A sunburst chart without any hierarchical data (one level of categories), looks similar to a doughnut chart. However, a sunburst chart with multiple levels of categories shows how the outer rings relate to the inner rings. The sunburst chart is most effective at showing how one ring is broken into its contributing pieces.

<p>SpreadJS supports sunburst chart. Use the <strong>GC.Spread.Sheets.Charts.ChartType.sunburst</strong> property to get the chart type.</p> <p>You can add a sunburst chart to Spread and change its style using the chart API.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chart = sheet.charts.add(<span class="hljs-string">'line'</span>, GC.Spread.Sheets.Charts.ChartType.sunburst, <span class="hljs-number">0</span>, <span class="hljs-number">200</span>, <span class="hljs-number">400</span>, <span class="hljs-number">400</span>, <span class="hljs-string">'A1:D17'</span>) <span class="hljs-keyword">var</span> title = chart.title() title.text = <span class="hljs-string">'DEMO'</span>; chart.title(title); </code></pre>
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 charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.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; }