表格控件SpreadJS使用教程：如何创建Excel迷你图|附代码-控件新闻-慧都网

表格控件SpreadJS使用教程：如何创建Excel迷你图|附代码

转帖|使用教程|编辑：鲍佳佳|2020-08-10 09:50:05.517|阅读 302 次

概述：本文主要是讲述什么是迷你图，以及如何在表格控件SpreadJS中创建兼容Excel函数的迷你图。以及各类函数参数。并以代码的形式呈现如何创建折线迷你图，柱形图迷你图，盈亏图迷你图。

#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>

相关链接：

SpreadJS是一款基于HTML5的纯前端表格控件，兼容450种以上的Excel公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金、远光软件等各领域龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。

点击下载SpreadJS最新试用版

迷你图：

您可以根据一个范围单元格的数据在某一个单元格中创建一张缩略图。您可以创建柱形图，折线图，盈亏图这三类基本迷你图，也可以创建自定义的迷你图。

您还可以依托函数来创建迷你图，通过函数可以绘制瀑布，箱线，子弹，横/竖向柱状，阶梯瀑布，饼状，面积，散点，散布，堆积，方差等多种类型的迷你图。

您可以试用setSparkline方法来给某个单元格设置迷你图。并使用getSparkline方法来获取迷你图。使用removeSparkline方法来移除指定单元格的迷你图。

您还可以使用addSparklineEx方法通过一个函数来创建一个自定义的迷你图。

注：通过公式自定义的迷你图无法导出到Excel

柱状迷你图的画法就像柱状图一样。折线迷你图的画法也跟折线图一样。盈亏图的所有的点都是一样的大小。负数从横轴向下延伸，正数从横轴向上延伸。

迷你图可以显示标记点的颜色，您可以设置最高点，最低点，负数，第一个点，最后一个点的颜色。

迷你图分为水平轴线和垂直轴线，你可以给迷你图分组，同一分组中的迷你图可以共享一些通用的设置。你可以使用groupSparkline和ungroupSparkline方法来分组或者取消分组。

创建兼容Excel函数迷你图

通过折线图函数，柱形图函数，或者盈亏图函数可以创建各自的迷你图。

函数有以下参数：

你可以通过折线图函数，柱形图函数，或者盈亏图函数来创建各自的迷你图。比如：

=LINESPARKLINE(data, dataOrientation, dateAxisData, dateAxisOrientation, setting) =COLUMNSPARKLINE(data, dataOrientation, dateAxisData, dateAxisOrientation, setting) =WINLOSSSPARKLINE(data, dataOrientation, dateAxisData, dateAxisOrientation, setting)

下面代码展示了如何创建折线迷你图，柱形图迷你图，盈亏图迷你图

activeSheet.addSpan(0, 0, 1, 5);
activeSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport).value("The company revenue in 2014").font("20px Arial").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
var table1 = activeSheet.tables.add("table1", 1, 0, 13, 5, GC.Spread.Sheets.Tables.TableThemes.medium4);
table1.filterButtonVisible(false);
activeSheet.setValue(1, 0, "Month");
activeSheet.setValue(1, 1, "Revenue");
activeSheet.setValue(1, 2, "Diagram 1");
activeSheet.setValue(1, 3, "Diagram 2");
activeSheet.setValue(1, 4, "Diagram 3");
for (var i = 2; i < 14; i+) {
    activeSheet.setValue(i, 0, new Date(2014, i - 1, 1));
}
activeSheet.getRange(-1, 0, -1, 1).formatter("mm/dd/yyyy");
activeSheet.setValue(2, 1, 10);
activeSheet.setValue(3, 1, 20);
activeSheet.setValue(4, 1, 50);
activeSheet.setValue(5, 1, 100);
activeSheet.setValue(6, 1, 30);
activeSheet.setValue(7, 1, - 10);
activeSheet.setValue(8, 1, -25);
activeSheet.setValue(9, 1, 60);
activeSheet.setValue(10, 1, 50);
activeSheet.setValue(11, 1, 30);
activeSheet.setValue(12, 1, 80);
activeSheet.setValue(13, 1, 88);
activeSheet.addSpan(2, 2, 10, 1);
activeSheet.setFormula(2, 2, '=LINESPARKLINE(B3:B14,0,A3:A14,0,"{axisColor:rgb(255,255,0),firstMarkerColor:brown,highMarkerColor:red,lastMarkerColor:blue,lowMarkerColor:green,markersColor:purple,negativeColor:yellowgreen,seriesColor:pink,displayXAxis:true,showFirst:true,showHigh:true,showLast:true,showLow:true,showNegative:true,showMarkers:true,lineWeight:3,displayHidden:false,displayEmptyCellsAs:1,rightToLeft:false,minAxisType:1,maxAxisType:1,manualMax:5,manualMin:-3}")');activeSheet.addSpan(2, 3, 10, 1);
activeSheet.setFormula(2, 3, '=COLUMNSPARKLINE(B3:B14,0,A3:A14,0,"{axisColor:rgb(255,255,0),firstMarkerColor:brown,highMarkerColor:red,lastMarkerColor:blue,lowMarkerColor:green,markersColor:purple,negativeColor:yellowgreen,seriesColor:pink,displayXAxis:true,showFirst:true,showHigh:true,showLast:true,showLow:true,showNegative:true,showMarkers:true,lineWeight:3,displayHidden:false,displayEmptyCellsAs:1,rightToLeft:false,minAxisType:1,maxAxisType:1,manualMax:5,manualMin:-3}")');activeSheet.addSpan(2, 4, 10, 1);
activeSheet.setFormula(2, 4, '=WINLOSSSPARKLINE(B3:B14,0,A3:A14,0)');
activeSheet.setRowHeight(0, 50);for (var i = 1; i < 14; i+) {
    activeSheet.setRowHeight(i, 25);
}
activeSheet.setColumnWidth(0, 80);
activeSheet.setColumnWidth(2, 200);
activeSheet.setColumnWidth(3, 200);
activeSheet.setColumnWidth(4, 200);