自定制迷你图

在你创建迷你图后,你可以使用 SpreadJS 提供的接口来定制迷你图,比如迷你图的分组,改变迷你图的类型,设置坐标轴的数据等等。

你可以给迷你图分组,同一分组中的迷你图可以共享一些通用的设置。 你可以使用 groupSparkline 和 ungroupSparkline 方法来分组或者取消分组。例如: 你可以使用 sparklineType 方法来改变迷你图的类型。比如: 你也可以使用 data 方法来获取或者设置数据。使用 dataOrientation 方法来获取或者设置数据方向。使用 dateAxisData 方法来自定制迷你图的数据轴数据。 使用 dateAxisOrientation 方法来获取或者设置轴方向。使用 displayDateAxis 方法来获取或者设置是否显示数据轴。例如: 因为迷你图可供设置的配置还有很多,你可以使用 setting 方法来获取或者设置这些迷你图的更多配置。 例如: 当迷你图被设定为一组是,同组中的迷你图将共享统一的设置,接下来,你会看到如何应用迷你图的设置. 迷你图提供了一个事件,这个事件在迷你图变化的时候会被触发。例如:
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); sheet.options.allowCellOverflow = true; sheet.setValue(0, 0, "Data Range is A2-A9"); sheet.setValue(1, 0, 1); sheet.setValue(2, 0, -2); sheet.setValue(3, 0, -1); sheet.setValue(4, 0, 6); sheet.setValue(5, 0, 4); sheet.setValue(6, 0, -4); sheet.setValue(7, 0, 3); sheet.setValue(8, 0, 8); sheet.setValue(0, 1, "Data Range is A2-A9"); sheet.setValue(1, 1, 1); sheet.setValue(2, 1, 3); sheet.setValue(3, 1, -1); sheet.setValue(4, 1, 6); sheet.setValue(5, 1, -4); sheet.setValue(6, 1, 4); sheet.setValue(7, 1, -2); sheet.setValue(8, 1, 8); sheet.setValue(0, 3, "Date axis range is C2-C9"); sheet.setValue(1, 3, new Date(2011, 0, 5)); sheet.setValue(2, 3, new Date(2011, 0, 1)); sheet.setValue(3, 3, new Date(2011, 1, 11)); sheet.setValue(4, 3, new Date(2011, 2, 1)); sheet.setValue(5, 3, new Date(2011, 1, 1)); sheet.setValue(6, 3, new Date(2011, 1, 3)); sheet.setValue(7, 3, new Date(2011, 2, 6)); sheet.setValue(8, 3, new Date(2011, 1, 19)); var data = new spreadNS.Range(1, 0, 8, 1); var dateAxis = new spreadNS.Range(1, 3, 8, 1); sheet.getCell(9, 0).text("Sparkline with dateAxis:"); sheet.getCell(10, 0).text("(1) Line"); sheet.getCell(10, 3).text("(2)Column"); sheet.getCell(10, 6).text("(3)Winloss"); //line sheet.addSpan(11, 0, 4, 3); var setting = new spreadNS.Sparklines.SparklineSetting(); setting.options.showMarkers = true; setting.options.displayXAxis = true; setting.options.showFirst = true; setting.options.showLast = true; setting.options.showLow = true; setting.options.showHigh = true; setting.options.showNegative = true; sheet.setSparkline(11, 0, data , spreadNS.Sparklines.DataOrientation.vertical , spreadNS.Sparklines.SparklineType.line , setting , dateAxis , spreadNS.Sparklines.DataOrientation.vertical ); //column sheet.addSpan(11, 3, 4, 3); setting = new spreadNS.Sparklines.SparklineSetting(); setting.options.displayXAxis = true; setting.options.showFirst = true; setting.options.showLast = true; setting.options.showLow = true; setting.options.showHigh = true; setting.options.showNegative = true; sheet.setSparkline(11, 3, data , spreadNS.Sparklines.DataOrientation.vertical , spreadNS.Sparklines.SparklineType.column , setting , dateAxis , spreadNS.Sparklines.DataOrientation.vertical ); //winloss sheet.addSpan(11, 6, 4, 3); setting = new spreadNS.Sparklines.SparklineSetting(); setting.options.displayXAxis = true; setting.options.showNegative = true; sheet.setSparkline(11, 6, data , spreadNS.Sparklines.DataOrientation.vertical , spreadNS.Sparklines.SparklineType.winloss , setting , dateAxis , spreadNS.Sparklines.DataOrientation.vertical ); sheet.bind(spreadNS.Events.SelectionChanged, selectionChangedCallback); sheet.resumePaint(); function selectionChangedCallback() { var sheet = spread.getActiveSheet(); var sparkline = sheet.getSparkline(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (sparkline) { updateSetting(sparkline); } else { initSetting(); } } function updateSetting(sparkline) { var type = sparkline.sparklineType(), displayDateAxis = sparkline.displayDateAxis(); var sparklinetype = _getElementById("sparklinetype"); _selectOption(sparklinetype, type + ""); _getElementById("displayDateAxis").setAttribute("checked", !!displayDateAxis); } function initSetting() { var sparklinetype = _getElementById("sparklinetype"); _selectOption(sparklinetype, '0'); _getElementById("displayDateAxis").setAttribute("checked", false); } function getActualRange(range, maxRowCount, maxColCount) { var row = range.row < 0 ? 0 : range.row; var col = range.col < 0 ? 0 : range.col; var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount; var colCount = range.colCount < 0 ? maxColCount : range.colCount; return new spreadNS.Range(row, col, rowCount, colCount); } _getElementById("btnGroupSparkline").addEventListener('click',function () { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); var sels = sheet.getSelections(); var i = 0; var sparklines = []; for (var n = 0; n < sels.length; n++) { if (sels) { var sel = getActualRange(sels[n], sheet.getRowCount(), sheet.getColumnCount()); var rowCount = sel.rowCount; var colCount = sel.colCount; for (var i = 0; i < rowCount; i++) { for (var j = 0; j < colCount; j++) { var sparkline = sheet.getSparkline(sel.row + i, sel.col + j); if (sparkline != null) { sparklines.push(sparkline); } } } sheet.groupSparkline(sparklines); } } sheet.resumePaint(); }); _getElementById("btnUnGroupSparkline").addEventListener('click',function () { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); var sels = sheet.getSelections(); var sparkline; for (var n = 0; n < sels.length; n++) { if (sels) { var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount()); var rowCount = sel.rowCount; var colCount = sel.colCount; for (var i = 0; i < rowCount; i++) { for (var j = 0; j < colCount; j++) { sparkline = sheet.getSparkline(sel.row + i, sel.col + j); if (sparkline != null) { sheet.ungroupSparkline(sparkline.group()); } } } } } sheet.resumePaint(); }); _getElementById("sparklinetype").addEventListener('change',function () { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); var sels = sheet.getSelections(); var sparkline; for (var n = 0; n < sels.length; n++) { if (sels) { var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount()); var rowCount = sel.rowCount; var colCount = sel.colCount; for (var i = 0; i < rowCount; i++) { for (var j = 0; j < colCount; j++) { sparkline = sheet.getSparkline(sel.row + i, sel.col + j); if (sparkline != null) { sparkline.sparklineType(parseInt(this.value)); } } } } } sheet.resumePaint(); }); _getElementById("displayDateAxis").addEventListener('change',function () { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); var sels = sheet.getSelections(); var sparkline; for (var n = 0; n < sels.length; n++) { if (sels) { var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount()); var rowCount = sel.rowCount; var colCount = sel.colCount; for (var i = 0; i < rowCount; i++) { for (var j = 0; j < colCount; j++) { sparkline = sheet.getSparkline(sel.row + i, sel.col + j); if (sparkline != null) { sparkline.displayDateAxis(this.checked); } } } } } sheet.resumePaint(); }); }; function _getElementById(id){ return document.getElementById(id); } function _selectOption(select, value) { for (var i = 0; i < select.length; i++) { var op = select.options[i]; if (op.value === value) { op.selected = true; } else { op.selected = false; } } }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <p style="font-size:20px;padding:4px 0px">Select a sparkline in the spreadsheet to change its type</p> <p>You can also select multiple sparklines using Ctrl+Click/Shift+Click and click the “Group” button. You can then change the group sparkline type by selecting one of those sparklines in the group and selecting another option from the “Type” dropdown</p> <div class="option-group"> <label for="sparklinetype">Type:</label> <select id="sparklinetype"> <option value="0">line</option> <option value="1">column</option> <option value="2">winloss</option> </select> </div> <div class="option-group"> <input type="checkbox" id="displayDateAxis" checked /> <label for="displayDateAxis">displayDateAxis</label> </div> <div class="option-group"> <input id='btnGroupSparkline' type='button' value='Group' /> <input id='btnUnGroupSparkline' type='button' value='UnGroup' /> </div> </div> </div> </body> </html>
.sample { position: relative; height: 100%; overflow: auto; } .sample::after { display: block; content: ""; clear: both; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } .option-group { margin-bottom: 12px; } input, select { padding: 4px 6px; box-sizing: border-box; } p{ padding:2px 10px; background-color:lavender; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }