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).

<p>SpreadJS supports treemap charts. Use the <strong>GC.Spread.Sheets.Charts.ChartType.treemap</strong> property to get the chart type.</p> <p>You can add a treemap 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.treemap, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>, <span class="hljs-number">400</span>, <span class="hljs-number">300</span>, <span class="hljs-string">'A1:D4'</span>); <span class="hljs-keyword">var</span> dataPoints = chart.series().dataPoints(); <span class="hljs-keyword">var</span> dataPoint = dataPoints().get(index ?); dataPoint.fillColor = <span class="hljs-string">'skyblue'</span>; dataPoints.set(index, dataPoint); </code></pre> <p><strong>Treemap:</strong> Treemap charts intuitively show data with many categories.</p>
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']; 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 = [ ['Type', 'Cost', 'Amount'], ['Housing', 'Mortgage', 500], [, 'Phone', 100], [, 'Electricity', 56], [, 'Gas', 28], [, 'Water', 8], [, 'Cable', 34], [, 'Waste', 10], [, 'Maintenance', 20], [, 'Supplies', 20], [, 'Other', 10], ['Entertainment', 'Video/DVD', 83], [, 'CDs', 18], [, 'Movies', 46], [, 'Concerts', 77], [, 'Sporting Events', 350], [, 'Live Theater', 200] ]; 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="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; }