照相机

SpreadJS 提供照相机功能,照相机是在工作表中创建一种视觉引用的功能,照相机创建一个引用区域的镜像图片,这是一个动态图像,这意味着参考区域的任何变化都会立即反映在照相机图像中,使其成为创建信息仪表板的理想选择。

照相机形状可以移动、调整大小、旋转并支持 Excel I/O。它们也可以与其他形状组合或取消组合,并从一个sheet复制粘贴到另一个sheet。

SpreadJS 提供照相机功能. 你可以添加一个照相机形状,以及用CameraShapeAPI改变照相机的样式。
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.name("CameraShape"); prepareCellRangeData(sheet); initShape(sheet); } function prepareCellRangeData(sheet){ sheet.setArray(0, 0, [ ["Product", "Price", "Quantity", "Sales"], ['Kraft Real Mayo', 5.71, 1], ['Smartfood Popcorn', 2.5, 4], ['Teddy Grahams Crackers', 35, 5], ['Parmesan Cheese', 14.89, 9], ['Planter Deluxe Whole Cashew', 8.52, 3], ['Total'] ]); sheet.setColumnWidth(0, 190); sheet.setColumnWidth(1, 100); sheet.setColumnWidth(2, 100); sheet.setColumnWidth(3, 100); sheet.setFormula(1, 3, "B2*C2"); sheet.setFormula(2, 3, "B3*C3"); sheet.setFormula(3, 3, "B4*C4"); sheet.setFormula(4, 3, "B5*C5"); sheet.setFormula(5, 3, "B6*C6"); sheet.addCustomName('customName1', '=$B$2:$B$6', 0, 0); sheet.addCustomName('customName2', '=$C$2:$C$6', 0, 0); sheet.setFormula(6, 1, "=SUM(customName1)"); sheet.setFormula(6, 2, "=SUM(customName2)"); sheet.getRange(6, 0, 1, 4).foreColor('red'); sheet.setFormula(6, 3, "B7*C7"); sheet.getRange(-1,1,0,1).formatter("$ #,##0.00"); sheet.getRange(-1,3,0,1).formatter("$ #,##0.00"); var table = sheet.tables.add("table1", 0, 0, 7, 4, GC.Spread.Sheets.Tables.TableThemes.light7); table.filterButtonVisible(false); } function initShape(sheet) { var shape = sheet.shapes.addCameraShape("myCameraShape1", "CameraShape!A1:D7", 240, 200); var shapeStyle = shape.style(); shapeStyle.fill.color = 'pink'; shapeStyle.fill.transparency = 0.8; shapeStyle.line.color = 'black'; shapeStyle.line.lineStyle = GC.Spread.Sheets.Shapes.PresetLineDashStyle.dashDot; shapeStyle.line.width = 4; shapeStyle.line.capType = GC.Spread.Sheets.Shapes.LineCapStyle.square; shapeStyle.line.joinType = GC.Spread.Sheets.Shapes.LineJoinStyle.miter; shapeStyle.line.transparency = 0.1; shape.style(shapeStyle); }
<!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-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.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="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></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }