使用 SpreadJS 中的图表和公式创建贝尔曲线（Bell Curve）

前言 | 问题背景

贝尔曲线（也称为正态分布、Bell Curve）是变量的常见分布类型。贝尔曲线有很多用例，在统计学中，钟形曲线用于模拟各种各样的真实数据。在金融行业，分析师和投资者在分析证券的回报或整体市场敏感度时使用正态概率分布。

在这篇文章中，我将讨论如何在Spread.Sheets中设计钟形曲线。我们将使用散点图和内置公式绘制曲线。

具体实现

让我们用一些公司员工评级的假设数据填写Spread.Sheets。

在Spread.Sheets中填充数据的代码如下：

spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var dataSheet = spread.sheets[0];

dataSheet.setValue(0, 0, 'Employee Name', GC.Spread.Sheets.SheetArea.colHeader);
dataSheet.setValue(0, 1, 'Employee Ratings', GC.Spread.Sheets.SheetArea.colHeader);
dataSheet.setValue(0, 2, 'Normal Distribution', GC.Spread.Sheets.SheetArea.colHeader);
dataSheet.setValue(0, 3, 'Mean', GC.Spread.Sheets.SheetArea.colHeader);
dataSheet.setValue(0, 4, 'Standard Deviation', GC.Spread.Sheets.SheetArea.colHeader);

for (var i = 0; i <= 99; i++)
{               
    dataSheet.setValue(i, 0, "Employee" +" "+ i);
}
for (var i = 0; i <= 99; i++) {             

    dataSheet.setValue(i, 1, Math.floor(Math.random() * (50 - 10 + 1)) + 10);
}

由于钟形曲线显示正态分布，我们将使用SpreadJS的Norm.Dist（）来计算数据点。

但是，正态分布需要均值和标准差来计算分布值。因此，让我们首先得到这些值的均值和标准差。

请注意，需要按递增顺序对值进行排序，以找到正确的均值。

spread.getActiveSheet().sortRange(-1, -1, -1, -1, true, [{ index: 1, ascending: true }]);

让我们计算平均值和标准差：

dataSheet.setFormula(0, 3, "=AVERAGE(B1:B100)", GC.Spread.Sheets.SheetArea.viewport);
dataSheet.setFormula(0, 4, "=STDEV(B1:B100)", GC.Spread.Sheets.SheetArea.viewport);

让我们将这些值放在Norm.Dist公式中以获得分布：

for (var i = 0; i <= 99; i++) {
    var j = i + 1;
    dataSheet.setFormula(i, 2, "=NORM.DIST(B" + j + ",D1,E1,FALSE) ", GC.Spread.Sheets.SheetArea.viewport);
}

现在最重要的部分是使用计算的分布来绘制钟形曲线图。在SpreadJS中，我们将Scatter图表的数据范围设置为这些分布值：

var chartType = GC.Spread.Sheets.Charts.ChartType.xyScatter;
var chart = dataSheet.charts.add('Bell Curve', chartType, 280, 30, 700, 390, "B1:C100");

钟形曲线显示的正态分布结果如下所示：

SpreadJS | 下载试用

纯前端表格控件SpreadJS，是市面上布局与功能都与 Excel 高度类似的一款表格控件，全中文操作界面，适用于.NET、Java、移动端等多个平台的类 Excel 数据开发，备受华为、中通、民航飞行学院等国内知名企业客户青睐。