Empty write a complete demo of it
// report control input parameters determined function SpreadObj (Response) { var Spread = null ; // data list var dataArray is = [ [ "position", "end of oriented displacement value (mm) ',' current displacement (mm) ', 'to the end of this displacement (mm)', 'maximum amount of displacement (mm)', 'displacement rate (mm / month)', 'warning value (mm)', 'control value (mm)' ], ]; // endpoint coordinate data list information var dataListInfo = { X: 0, // vertex coordinates (upper left) X Y:. 4, // (upper left corner) y vertex coordinates rows:. 5, // number of rows cols:. 7 // number of columns }; // Basic information var= baseInfo { the reportName: '' , reportNum: '' , bridgeName: '' , monitorUnit: '' , monitorDate: '' }; // load the control function loadSpread () { InitBaseInfo (); Spread = new new GC.Spread.Sheets .Workbook (document.getElementById ( "SS" ), { SheetCount: . 1 }); initSpread (Spread); // initialize // bindEvent (Spread); // load button event switchRowColumn (Spread); } loadSpread (); // the this .ExportExcel = function (fileName) { var excelIo = new new GC.Spread.Excel.IO (); excelIo.save (spread.toJSON (), function (BLOB) { saveAs (BLOB, fileName + '.xlsx' ); }, function (E) { console.error (E); // ERR }, { // password: '123' // set password }); }; // basic data initialization function InitBaseInfo () { baseInfo.reportName = response.reportName; baseInfo.reportNum = response.reportnumber; baseInfo.bridgeName = response.bridgeName; baseInfo.monitorUnit = response.monitorUnit; baseInfo.monitorDate = response.monitorDate; for (var i = 0; i < response.ListData.length; i++) { var item = response.ListData[i]; dataArray.push(item); } dataListInfo.cols = dataArray[0].length; dataListInfo.rows = dataArray.length; the console.log (dataListInfo); } // now button binding event function bindEvent (Spread) { // switching rows and columns document.getElementById ( "btn1") the onclick =. function () { switchRowColumn (Spread); }; / / printing document.getElementById ( "btn2") the onclick =. function () { spread.print (); // parameter index // spread.print (sheetIndex?); }; // derived document.getElementById ( "btn3" ) .onclick = function () { var excelIo =new new GC.Spread.Excel.IO (); // instance.save (json, successCallback, errorCallback, Options); console.log (JSON.stringify (spread.toJSON ())); excelIo.save (spread.toJSON ( ), function (BLOB) { saveAs (BLOB, 'excel1.xlsx' ); }, function (E) { console.error (E); // ERR }, { // password: '123' // set password } ); }; } // initialize workbook function initSpread (Spread) { // set the sheet name var sheet1 = spread.sheets[0]; sheet1.name("Common Chart"); //定义图表类型 var chartType = [{ type: GC.Spread.Sheets.Charts.ChartType.line, desc: "line", }, { type: GC.Spread.Sheets.Charts.ChartType.lineStacked, desc: "lineStacked", }, { type: GC.Spread.Sheets.Charts.ChartType.lineStacked100, desc: "lineStacked100", }, { type: GC.Spread.Sheets.Charts.ChartType.lineMarkers, desc: "lineMarkers", }, { type: GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked, desc: "lineMarkersStacked", }, { type: GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked100, desc: "lineMarkersStacked100", }]; spread.suspendPaint(); //初始化 工作表 initSheet(sheet1,chartType[3].desc); //添加图表 initChart(sheet1,chartType[3].type); spread.options.tabStripRatio = 0.8; spread.resumePaint(); } // Initialization worksheet function initSheet (Sheet) { sheet.suspendPaint (); // Suspend rendering sheet.setArray (dataListInfo.y, dataListInfo.x, dataArray is); // Parameters: YX Data sheet.resumePaint (); / / continue rendering // var ActiveSheet spread.getActiveSheet = (); // get the current active worksheet var ActiveSheet = sheet; // value = instance.getCell (Row, COL, sheetArea); // cell.hAlign (the GC. Spread.Sheets.HorizontalAlign.center); activeSheet.getCell (0, 0) .Value (baseInfo.reportName) .font ( "25pt Times New Roman" ) .hAlign (GC.Spread.Sheets.HorizontalAlign.center); activeSheet.getCell (1, 0) .value ( "Report Number (" + baseInfo.reportNum + ")" ) font ( "15pt Times New Roman." ) .HAlign (GC.Spread.Sheets.HorizontalAlign.center); activeSheet.getCell ( 2, 0 ) .value ( "bridge name:" + baseInfo.bridgeName); activeSheet.getCell ( 2,. 4) .value ( "monitoring unit:" + baseInfo.monitorUnit); activeSheet.getCell ( . 3, 0) .value ( "monitoring time: "+ baseInfo.monitorDate); // row number adaptive activeSheet.getCell (dataListInfo.rows + 20, 0) .value (" instructions " ) .hAlign (GC.Spread.Sheets.HorizontalAlign.center) ;; ActiveSheet .getCell (dataListInfo.rows + 21, 0) .Value ( "analysis and recommendations" ) .hAlign (GC.Spread.Sheets.HorizontalAlign.center) ;; activeSheet.getCell (dataListInfo.rows + 22 is, 0) .Value ( "Supervisor: Analyst: Auditor:" ); // Cell aspect adaptive // activeSheet.autoFitColumn (0); // column width from adaptation parameters: columnIndex activeSheet.autoFitRow (0); // line high adaptation parameters: rowIndex activeSheet.autoFitRow (. 1 ); // cell center // value = instance.getRange (row, COL, the rowCount, colCount, sheetArea) ; activeSheet.getRange (dataListInfo.y, dataListInfo.x, dataListInfo.rows, dataListInfo.cols, GC.Spread.Sheets.SheetArea.viewport) .hAlign (GC.Spread.Sheets.HorizontalAlign.center); // column width from adaptation for ( var i = dataListInfo.x + 1; i < dataListInfo.cols; i++) { activeSheet.autoFitColumn(i); } //单元格合并 //value = instance.addSpan(row, column, rowCount, colCount, sheetArea); var baseColumns = 8;//合并列最大宽度 activeSheet.addSpan(0, 0, 1, baseColumns, GC.Spread.Sheets.SheetArea.viewport); activeSheet.addSpan(1, 0, 1, baseColumns, GC.Spread.Sheets.SheetArea.viewport); activeSheet.addSpan(2, 0, 1, baseColumns / 2, GC.Spread.Sheets.SheetArea.viewport); activeSheet.addSpan(2, baseColumns / 2, 1, baseColumns / 2, GC.Spread.Sheets.SheetArea.viewport); activeSheet.addSpan(3, 0, 1, baseColumns, GC.Spread.Sheets.SheetArea.viewport); //行号自适应 activeSheet.addSpan(dataListInfo.rows + 20, 0, 1, 2, GC.Spread.Sheets.SheetArea.viewport); activeSheet.addSpan(dataListInfo.rows + 20, 2, 1, baseColumns - 2, GC.Spread.Sheets.SheetArea.viewport); activeSheet.addSpan(dataListInfo.rows + 21, 0, 1, 2, GC.Spread.Sheets.SheetArea.viewport); activeSheet.addSpan(dataListInfo.rows + 21, 2, 1, baseColumns - 2, GC.Spread.Sheets.SheetArea.viewport); activeSheet.addSpan(dataListInfo.rows 22 is +, 0,. 1 , baseColumns, GC.Spread.Sheets.SheetArea.viewport); // activeSheet.getCell (0, 0) .borderBottom (new new GC.Spread.Sheets.LineBorder ( "", GC.Spread.Sheets .LineStyle.medium)); // activeSheet.getRange (-1,. 3, -1,. 1, GC.Spread.Sheets.SheetArea.viewport) .borderBottom (new new GC.Spread.Sheets.LineBorder ( "Blue", the GC .Spread.Sheets.LineStyle.mediumDashed)); // hides gridlines // activeSheet.options.gridline = { // showVerticalGridline: to false, // showHorizontalGridline: to false // }; // // data not follow column listing the title go to solve: the write data is written into the empty empty cell, there would be such a problem // for (var I = 0; I <. 4; I ++) { // // row // activeSheet.getCell(i, 0).value(""); //} //for (var i = 0; i < dataArray.length; i++) { // //行 // for (var j = 0; j < dataArray[0].length; j++) { // //列 // activeSheet.getCell(i + 4, j).value(dataArray[i][j]); // } //} } //初始化 图表 function initChart(sheet) { //add common chart //GC.Spread.Sheets.Charts.Chart(sheet, name, chartType, x, y, width, height, dataRange, dataOrientation); //chartType：图表类型 // Position: GC.Spread.Sheets.Charts the Namespace: the ChartType the Enumeration: // Type: Line, lineMarkers, columnClustered, PIE // dataOrientation: a data area // sheet.charts.add ( 'Chart1', GC.Spread.Sheets.Charts .ChartType.lineMarkers, 0, 100, 800, 300, "A11: H14"); // list is automatically adjusted according to the position of the chart // a height that unit 20 Gemo var Y = dataListInfo.rows. 6 + 20 * * 20 is ; var width = 110 * dataListInfo.cols ; var Chart sheet.charts.add = ( 'Chart1', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 0, Y, width, 300 , the getArea ()); var = title chart.title (); title.text = "";// the name of the chart is not displayed when the default title.fontSize = 18 is ; chart.title (title); } // data list to obtain the data area according to statistical charts (dataOrientation) function the getArea () { // Examples // A1 : H4 // 10, 0 // A11: H14 var X = dataListInfo.x; var Y = dataListInfo.y; var Character = [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R "," S "," T ","The U-"," V "," X-"," the Y "," the Z " ]; // get the list of the data area two diagonal points coordinate // left corner var topPos = { X: . 1 + X, Y: . 1 + Y }; // bottom right var endpos = { X: . 3 + X, Y: Y + dataListInfo.rows }; var STARTCHAR = Character [X]; // beginning letter var endchar Character = [endPos.x -. 1]; // end letters return STARTCHAR topPos.y + + ':' + + endchar endPos.y; } // switch rows and columns function switchRowColumn (Spread) { var activeChart = spread.getActiveSheet().charts.all()[0]; if (activeChart) { var isSwitched = activeChart.switchDataOrientation(); if (!isSwitched) { alert("'Can't switch row/column"); } } } }