饼形图

SpreadJS 支持饼图和圆环图。在工作表中以列或行的形式排列的数据可以绘制为饼图。

通过 GC.Spread.Sheets.Charts.ChartType.pie 来指定图表类型为饼图。通过 GC.Spread.Sheets.Charts.ChartType.doughnut 来指定图表类型为圆环图。 下方代码展示了如何插入一个 Pie (饼图)类型的图表,你可以通过图表的api来更改图表的样式。 饼图只显示一个数据系列,通过 chart.series().get(index ?) 可以得到一个数据系列对应的系列实例,它的backColor属性是一个包含了这个系列上的所有颜色的字符串。饼图显示一个数据系列中各项的大小与各项总和的比例,它中的数据点显示为整个饼图的百分比。 下方代码展示了如何插入一个 Doughnut (圆环图)类型的图表,你可以通过图表的api来更改图表的样式。 圆环图以圆环的形式显示数据,圆环图可以包含多个数据系列,其中每个圆环分别代表一个数据系列。通过 chart.series().get(index ?) 可以得到一个数据系列对应的系列实例,它的backColor属性是一个包含了这个系列上的所有颜色的字符串。
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); 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.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 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 name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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; }