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.

<p>A <strong>Pie</strong> 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 <strong>chart.series().get()</strong> 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.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chart = sheet.charts.add(<span class="hljs-string">'pie'</span>, GC.Spread.Sheets.Charts.ChartType.pie, <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> series = chart.series().get(index ?) <span class="hljs-keyword">var</span> ser = series[<span class="hljs-number">0</span>].border.color = <span class="hljs-string">'red'</span>; chart.series.set(index, ser); </code></pre> <p>A <strong>Doughnut</strong> 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.</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chart = sheet.charts.add(<span class="hljs-string">'doughnut'</span>, GC.Spread.Sheets.Charts.ChartType.doughnut, <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> series = chart.series().get(index ?) <span class="hljs-keyword">var</span> ser = series[<span class="hljs-number">0</span>].border.width = <span class="hljs-number">3</span>; chart.series.set(index, ser); </code></pre>
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.backColor = 'rgb(91, 155, 213),rgb(237, 125, 49),rgb(165, 165, 165),rgb(255, 192, 0),rgb(68, 114, 196),rgb(112, 173, 71),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); 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.backColor = 'rgb(91, 155, 213),rgb(237, 125, 49),rgb(165, 165, 165),rgb(255, 192, 0),rgb(68, 114, 196),rgb(112, 173, 71),rgb(255,20,128)'; chart.series().set(i, 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/@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; }