直方函数迷你图

直方图用于表示数据集的频率分布。SpreadJS 允许您使用直方函数迷你图函数创建直方函数迷你图。

上图显示了直方函数迷你图及其元素：

• Bin: 包含指定值范围数据的数据容器。
• Bar: 负责 UI 的绘制块。如果paintLabel 选项为真，条形高度由以下表达式确定：否则由以下因素决定：
• Edge: 条的边框
• Data Label: 迷你图中显示的数据范围。数据标签字体大小由表达式决定:- 如果字体大小大于表达式，则取小于或等于表达式的最大整数作为字体大小。
• 如果单元格的高度小于单元格行高，则字体大小为 12px。

直方函数迷你图的类型

直方函数迷你图可以以离散或连续方式显示，如下所示：

离散直方图通过采用现有值以离散方式（没有连续间隔）表示数据。例如：20、34、38。这些值按升序绘制。

连续直方图通过采用一系列连续值来表示数据。第一个 bin 的区间为左闭右闭，而其余 bin 的区间为左开右闭。

• 下限使用以下公式计算：而上限是使用以下方法计算的：
• bin的宽度默认为1
• 如果比例小于 0，则迷你图设置为 1

可以使用HistogramSparkline 公式中的连续选项指定直方图的类型。直方函数迷你图公式具有以下选项，其中只有 'dataRange' 是必需的参数：

直方函数迷你图公式具有以下语法：

=HISTOGRAMSPARKLINE(dataRange,continuous?,paintLabel?,scale?,barWidth?,barColor?,labelFontStyle?,labelColor,edgeColor?)

注：

• 迷你图的默认填充为 3px。
• 当自定义字体大小超过单元格行高的三分之一时，paintLabel 选项不会绘制数据标签。
• 当任何数据标签的宽度大于条的平均宽度时，数据标签不会绘制。平均宽度由表达式（单元格宽度/条数）决定。例如，对于 100px 单元格宽度，迷你图中有 5 个条形。条形平均宽度为 20px。在此迷你图中，如果任何数据标签的宽度超过 20 像素，则不会绘制数据标签。
• 在数据范围内，任何非数字类型的值都将被忽略。

使用场景

考虑一个组织每周对用户的社交媒体消费进行调查的场景。直方函数迷你图可以描述这些统计数据并分析用户在不同社交媒体平台上花费的时间的趋势。

// 初始化Spread
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
spread.suspendPaint();
//  获取工作表
var sheet1 = spread.sheets[0];
// 设置 sheetAreaOffset 选项
sheet1.options.sheetAreaOffset = { left: 1, top: 1 };
// 隐藏网格线
sheet1.options.gridline = { showVerticalGridline: false, showHorizontalGridline: false };
//  隐藏行/列标题
sheet1.options.colHeaderVisible = false;
sheet1.options.rowHeaderVisible = false;
// 设置列宽
for (var i = 1; i < 5; i++)
    sheet1.setColumnWidth(i, 265);
sheet1.setColumnWidth(0, 140);
//  设置行高
sheet1.setRowHeight(0, 35, GC.Spread.Sheets.SheetArea.dataArea)
sheet1.setRowHeight(1, 35, GC.Spread.Sheets.SheetArea.dataArea)
sheet1.setRowHeight(2, 200, GC.Spread.Sheets.SheetArea.dataArea)
var dataArray =
    [
        ["Name", "Facebook", "Instagram", "LinkedIn", "Twitter"]
    ];
var dataArray1 =
    [
        ["John Mathew", 71, 74, 97, 85],
        ["Jim Parker", 76, 58, 88, 84],
        ["Sophia Ran", 97, 80, 74, 80],
        ["Wendi Blake", 55, 97, 84, 60],
        ["Stephan Lai", 81, 83, 94, 90],
        ["Fay Van Damme", 71, 78, 72, 82],
        ["Brevin Dice", 84, 80, 83, 93],
        ["Regina Oleveria", 86, 76, 56, 92],
        ["Georgi Facello", 78, 61, 91, 68],
        ["Bezalel Simmel", 85, 58, 92, 68],
        ["Sachin Tsukuda", 76, 70, 55, 81],
        ["Patricia Breugel", 64, 77, 83, 85],
        ["Zito Baaz", 82, 97, 66, 90],
        ["Navin Argence", 59, 87, 83, 85],
        ["Siamak Salverda", 77, 85, 97, 65],
        ["Khaled Kohling", 87, 67, 77, 97],
        ["Bangqing Kleiser", 49, 97, 78, 75],
        ["Rimli Dusink", 25, 61, 91, 91],
        ["Nathan Ranta", 65, 60, 96, 92],
        ["Gila Lukaszewicz", 27, 91, 62, 93],
        ["Kaijung Rodham", 31, 81, 67, 87],
        ["Mohammed Pleszkun", 20, 98, 67, 82],
        ["Shuichi Piazza", 67, 56, 81, 82],
        ["Katsuo Leuchs", 83, 74, 51, 42],
        ["Masanao Ducloy", 67, 64, 58, 73],
        ["Mihalis Crabtree", 80, 91, 57, 84],
        ["Danny Lenart", 92, 38, 99, 86],
        ["Yongqiao Dalton", 85, 61, 73, 81],
        ["Gaetan Veldwijk", 64, 52, 76, 72],
        ["Leszek Pulkowski", 95, 75, 64, 99],
        ["Weidon Gente", 77, 88, 77, 96],
        ["Krister Stranks", 72, 38, 89, 55],
        ["Ziyad Baaz", 89, 81, 83, 48],
        ["Ymte Perelgut", 67, 70, 97, 94],
        ["Tonia Butner", 99, 71, 87, 76],
        ["Shigeaki Narlikar", 78, 80, 80, 97],
        ["Ayakannu Beerel", 86, 61, 85, 81],
        ["Moni Bale", 60, 72, 71, 86],
        ["Manohar Heemskerk", 97, 60, 75, 78],
        ["Angus Swan", 33, 97, 99, 99],
        ["Christ Murtagh", 91, 76, 73, 80],
        ["Hilary Rodiger", 75, 64, 84, 54],
        ["Maren Baez", 45, 77, 86, 88],
        ["Greger Jahnichen", 98, 89, 81, 63],
        ["Ymte Duclos", 95, 83, 72, 72],
        ["Chenyi Hainaut", 81, 97, 99, 87],
        ["Kasidit Picel", 87, 80, 88, 80],
        ["Elrique Walstra", 96, 54, 38, 54],
        ["Adel Reghbati", 56, 88, 81, 88]
    ];

//设置数据
sheet1.setArray(1, 0, dataArray);
sheet1.setArray(3, 0, dataArray1);
sheet1.setValue(0, 0, "Social media usage of users (in minutes)", GC.Spread.Sheets.SheetArea.dataArea);
// 设置对齐
sheet1.getRange(-1, 0, -1, 10).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet1.addSpan(0, 0, 1, 5, GC.Spread.Sheets.SheetArea.dataArea);
            
//设置 HistogramSparkline 公式
sheet1.setFormula(2, 1, 'HISTOGRAMSPARKLINE(Sheet1!B4: B52, true, true, 20, 1, "#DC4463", "bold normal 10pt Calibri", "black")');
sheet1.setFormula(2, 2, 'HISTOGRAMSPARKLINE(Sheet1!C2: C50, true, true, 20, 1, "#FFAE49", "bold normal 10pt Calibri", "black")');
sheet1.setFormula(2, 3, 'HISTOGRAMSPARKLINE(Sheet1!D2: D50, true, true, 20, 1, "#5AB4BD", "bold normal 10pt Calibri", "black")');
sheet1.setFormula(2, 4, 'HISTOGRAMSPARKLINE(Sheet1!E2: E50, true, true, 20, 1, "#C2EDB2", "bold normal 10pt Calibri", "black")');
            
//设置第 0 行的样式
var style1 = new GC.Spread.Sheets.Style();
style1.font = "bold 24px Calibri";
style1.foreColor = "black";
style1.backColor = "#9FD5B7";
style1.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style1.vAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet1.setStyle(0, 0, style1, GC.Spread.Sheets.SheetArea.dataArea);

//  设置第 1 行的样式
var style = new GC.Spread.Sheets.Style();
style.font = "bold italic 20px Calibri";
style.foreColor = "black";
style.backColor = "#D3F0E0";
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
for (var i = 0; i < 5; i++) {
    sheet1.setStyle(1, i, style, GC.Spread.Sheets.SheetArea.dataArea);
}
// 设置第 2 行的样式
var style2 = new GC.Spread.Sheets.Style();
style2.backColor = "#EDFDF4";
for (var i = 0; i < 5; i++)
    sheet1.setStyle(2, i, style2, GC.Spread.Sheets.SheetArea.dataArea);

// 为 dataArea 单元格设置边框
sheet1.getRange("A4:E52").setBorder(
    new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thick),
    { top: true, bottom: true, left: true, right: true }, GC.Spread.Sheets.SheetArea.dataArea);

spread.resumePaint();