Pie Chart

SpreadJS supports pie charts. When the user has data that is arranged in one column or row on a worksheet, it can be plotted with a pie chart.

A Pie chart can be added to Spread, and the chart style can be changed using the chart API. The pie chart can only display one group of data, so use the chart.series().get() function to get the series information. Pie charts show the size of items in one data series, and the data points are shown as a percentage of the whole pie. A Doughnut chart can be added to Spread, and the chart style can be changed using the chart API. The doughnut chart can display all series, with each shown as a ring that represents a data series.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2}); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); var sheets = spread.sheets; initPieSheet(sheets[0]); initPieChart(sheets[0]); initDoughnutSheet(sheets[1]); initDoughnutChart(sheets[1]); spread.resumePaint(); } function initPieSheet(sheet) { sheet.name('Pie'); //prepare data for chart var dataArray = [ ["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'], ["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246] ]; sheet.setArray(0, 0, dataArray); } function initPieChart(sheet) { var chart = sheet.charts.add('PieChart1', GC.Spread.Sheets.Charts.ChartType.pie, 0, 50, 600, 400, "A1:H2"); showPieDataLabels(chart); changePieStyle(chart); changeChartTitle(chart); } function changeChartTitle(chart) { var title = chart.title(); title.text = "Browser Market Share"; title.fontSize = 18; chart.title(title); } // show dataLabels function showPieDataLabels(chart) { var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.showSeriesName = false; dataLabels.showCategoryName = true; dataLabels.format = "0.00%"; var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition; dataLabels.position = dataLabelPosition.bestFit; chart.dataLabels(dataLabels); } //change pie color function changePieStyle(chart) { chart.legend({position:GC.Spread.Sheets.Charts.LegendPosition.right}); var seriesItem = chart.series().get(0); seriesItem.dataPoints = { 0: { backColor: "rgb(91, 155, 213)" }, 1: { backColor: "rgb(237, 125, 49)" }, 2: { backColor: "rgb(165, 165, 165)" }, 3: { backColor: "rgb(255, 192, 0)" }, 4: { backColor: "rgb(68, 114, 196)" }, 5: { backColor: "rgb(112, 173, 71)" }, 6: { backColor: "rgb(255,20,128)" } } seriesItem.border.width = 3; chart.series().set(0, seriesItem); } function initDoughnutSheet(sheet) { sheet.name('Doughnut'); sheet.suspendPaint(); //prepare data for chart var dataArray = [ ["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'], ["2014", 0.4966, 0.1801, 0.2455, 0.0470, 0.0, 0.0150, 0.0158], ["2015", 0.5689, 0.1560, 0.1652, 0.0529, 0.0158, 0.0220, 0.0192], ["2016", 0.6230, 0.1531, 0.1073, 0.0464, 0.0311, 0.0166, 0.0225], ["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246] ]; sheet.setArray(0, 0, dataArray); sheet.resumePaint(); } function initDoughnutChart(sheet) { var chart = sheet.charts.add('DoughnutChart1', GC.Spread.Sheets.Charts.ChartType.doughnut, 0, 100, 600, 320, "A1:H5"); changeDoughnutColor(chart); changeDoughnutLegendPosition(chart); changeDoughnutHoleSize(chart); changeChartTitle(chart); } //change doughnut color function changeDoughnutColor(chart) { var series = chart.series().get(); for (var i = 0; i < series.length; i++) { var seriesItem = series[i]; seriesItem.dataPoints = { 0: { backColor: "rgb(91, 155, 213)" }, 1: { backColor: "rgb(237, 125, 49)" }, 2: { backColor: "rgb(165, 165, 165)" }, 3: { backColor: "rgb(255, 192, 0)" }, 4: { backColor: "rgb(68, 114, 196)" }, 5: { backColor: "rgb(112, 173, 71)" }, 6: { backColor: "rgb(255,20,128)" } } chart.series().set(i, seriesItem); } } function changeDoughnutHoleSize(chart) { var seriesItem = chart.series().get(0); seriesItem.doughnutHoleSize = 0.3; chart.series().set(0, seriesItem); } function changeDoughnutLegendPosition(chart){ chart.legend({position:GC.Spread.Sheets.Charts.LegendPosition.right}); }
<!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; }