SpreadJS是一款基于HTML5的純前端表格控件，兼容450種以上的Excel公式，具備“高性能、跨平臺、與 Excel 高度兼容”的產品特性，備受華為、蘇寧易購、天弘基金、遠光軟件等各領域龍頭企業的青睞，并被中國軟件行業協會認定為“中國優秀軟件產品”。

點擊下載SpreadJS最新試用版

迷你圖：

您可以根據一個范圍單元格的數據在某一個單元格中創建一張縮略圖。您可以創建柱形圖，折線圖，盈虧圖這三類基本迷你圖，也可以創建自定義的迷你圖。

您還可以依托函數來創建迷你圖，通過函數可以繪制瀑布，箱線，子彈，橫/豎向柱狀，階梯瀑布，餅狀，面積，散點，散布，堆積，方差等多種類型的迷你圖。

您可以試用setSparkline方法來給某個單元格設置迷你圖。并使用getSparkline方法來獲取迷你圖。使用removeSparkline方法來移除指定單元格的迷你圖。

您還可以使用addSparklineEx方法通過一個函數來創建一個自定義的迷你圖。

柱狀迷你圖的畫法就像柱狀圖一樣。折線迷你圖的畫法也跟折線圖一樣。盈虧圖的所有的點都是一樣的大小。負數從橫軸向下延伸，正數從橫軸向上延伸。

迷你圖可以顯示標記點的顏色，您可以設置最高點，最低點，負數，第一個點，最后一個點的顏色。

 迷你圖分為水平軸線和垂直軸線，你可以給迷你圖分組，同一分組中的迷你圖可以共享一些通用的設置。 你可以使用groupSparkline和ungroupSparkline方法來分組或者取消分組。

通過折線圖函數，柱形圖函數，或者盈虧圖函數可以創建各自的迷你圖。

函數有以下參數：

你可以通過折線圖函數，柱形圖函數，或者盈虧圖函數來創建各自的迷你圖。比如：

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