饼图

饼形图广泛用于显示单个数据系列中与总量成比例的每个项目的大小。 数据点显示为整个饼图的百分比。 当您想以百分比或份额形式可视化数据时，此图表非常理想。

可以在饼图中绘制在表单的列或行中排列的数据。 通常，饼形图类似于分成多个小扇区的圆圈，代表每个类别对整体的贡献的一部分。 这些图表通常仅显示一组数据。

SpreadJS支持以下类型的饼图。 在下面显示的示例中，以不同类型的饼图描述了不同浏览器的浏览器市场份额（百分比）。

饼图

该图表以圆形结构显示单个数据系列，每个扇区代表一个不同的类别。

饼图的图像如下所示：

示例代码

此代码显示如何在表单中添加饼图和圆环图以及自定义某些图表元素。

// 初始化 Spread
 var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 3 });
 // 获取表单
 var activeSheet = spread.getSheet(0);

 //准备数据
 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]
 ];
 activeSheet.setArray(0, 0, dataArray);

// 添加饼图
 var chart = activeSheet.charts.add('PieChart', GC.Spread.Sheets.Charts.ChartType.pie, 0, 50, 600, 400, "A1:H2");
 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);

 var title = chart.title();
 title.text = "Browser Market Share";
 title.fontSize = 18;
 chart.title(title);

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

 // 添加圆环图
 var chart = activeSheet.charts.add('DoughnutChart', GC.Spread.Sheets.Charts.ChartType.doughnut, 0, 100, 600, 320, "A1:H5");
 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);
 }
 chart.legend({ position: GC.Spread.Sheets.Charts.LegendPosition.right });
 var title = chart.title();
 title.text = "Browser Market Share";
 title.fontSize = 18;
 chart.title(title);