Treemap Chart

The Treemap Chart shows the hierarchical data as a set of nested rectangles. A colored rectangle (often called a 'branch') represents a level in a hierarchy that contains other rectangles ('leaves'). The inner space of each rectangle is allocated according to the measured quantitative value, and the rectangles are arranged by size from the upper left (maximum) to the lower right (smallest).

SpreadJS supports treemap charts. Use the GC.Spread.Sheets.Charts.ChartType.treemap property to get the chart type. Treemap charts intuitively show data with many categories. You can add a treemap chart to Spread and change its style using the chart 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 sheet style setSheet(sheets); setData(sheets[0], 'treemapChart'); initTreemap(sheets[0], GC.Spread.Sheets.Charts.ChartType.treemap); setData(sheets[1], 'customStyle'); var customTreemapChart = initTreemap(sheets[1], GC.Spread.Sheets.Charts.ChartType.treemap); setDataLabels(customTreemapChart); setTitle(customTreemapChart); setDataPoints(customTreemapChart); spread.resumePaint(); } function setSheet(sheets) { var columnWidths = [20, 100, 100, 80]; 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, 3) .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, 3).font('bold normal 10pt Arial'); for (var j = 0; j < columnWidths.length; j++) { sheets[i].setColumnWidth(j, columnWidths[j]); } } } function initTreemap(sheet, chartType) { sheet.resumePaint(); return sheet.charts.add((sheet.name() + chartType), chartType, 320, 0, 650, 400, "B2:E18"); } function setDataLabels(chart) { var dataLabels = chart.dataLabels(); dataLabels.color='white'; chart.dataLabels(dataLabels); } function setTitle(chart) { var title = chart.title(); title.text = 'Expenses'; chart.title(title); } function setDataPoints(chart) { var dataPoints = chart.series().dataPoints(); var fillColors = ['#4472c4', '#a5a5a5', '#ffc000', '#ed7d31']; for (var i = 0; i < fillColors.length; i++) { var dataPoint = dataPoints.get(i); dataPoint.fillColor = fillColors[i]; dataPoint.transparency = 0; // 0~1 dataPoints.set(i, 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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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="sample-tutorial"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }