基本应用

迷你图在显示 SpreadJS 数据的趋势时非常有用,特别是当你与其他人共享数据时。 使用迷你图(单个工作表单元格内的微型图表)可以直观地表示和显示数据趋势。 迷你图可以通过不同颜色吸引对某些内容(如季节性增加或降低或经济周期)的注意,并突出显示最大和最小值。

你可以使用 setSparkline 方法来给某个单元格设置迷你图。 并使用 getSparkline 方法来获取迷你图。例如: SpreadJS 支持 3 种迷你图. SparklineType 枚举表示了各种迷你图的类型: line column winloss 您可以在Excel中使用上面的所有三个sparklines。但是对于其他的sparklines,比如Compatible sparkline, Excel中不支持,除非您得到一个提供这种支持的外接程序扩展。 你可以使用 removeSparkline 方法来移除指定单元格的迷你图。例如: 你也可以使用公式来创建迷你图, 参见 Compatible. 迷你图 data 和 dateAxis 也支持自定义名称。例如:
import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import '@grapecity-software/spread-sheets-resources-zh'; GC.Spread.Common.CultureManager.culture("zh-cn"); import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { SpreadSheetsModule } from '@grapecity-software/spread-sheets-angular'; import GC from '@grapecity-software/spread-sheets'; import './styles.css'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { position = { row: 0, col: 0, rowCol: '0,0' }; type = 0; orientation = 0; spread: GC.Spread.Sheets.Workbook; hostStyle = { width: 'calc(100% - 280px)', height: '100%', overflow: 'hidden', float: 'left' }; clearSprikline() { let sheet = this.spread.getActiveSheet(); let range = this.getActualCellRange(sheet.getSelections()[0], sheet.getRowCount(), sheet.getColumnCount()); for (let r = 0; r < range.rowCount; r++) { for (let c = 0; c < range.colCount; c++) { sheet.removeSparkline(r + range.row, c + range.col); } } } addSprikline() { let sheet = this.spread.getActiveSheet(); let range = this.getActualCellRange(sheet.getSelections()[0], sheet.getRowCount(), sheet.getColumnCount()); let r = this.position.row; let c = this.position.col; let orientation = this.orientation; let type = this.type; //sparkline settings var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting(); setting.options.showMarkers = true; setting.options.lineWeight = 3; setting.options.displayXAxis = true; setting.options.showFirst = true; setting.options.showLast = true; setting.options.showLow = true; setting.options.showHigh = true; setting.options.showNegative = true; if (!isNaN(r) && !isNaN(c)) { sheet.setSparkline(r, c, range, orientation, type, setting); } } setOrientation(e: any) { this.orientation = parseInt(e.target.value); } setType(e: any) { this.type = parseInt(e.target.value); } setPosition(e: any) { let value = e.target.value, arr = value.split(','), row = parseInt(arr[0]), col = parseInt(arr[1]); this.position = { row: row, col: col, rowCol: row + ',' + col }; } _selectOption(select: string, value: number) { if (select === 'line_type') { this.type = value; } else { this.orientation = value; } } getActualCellRange(cellRange: any, rowCount: number, columnCount: number) { if (cellRange.row == -1 && cellRange.col == -1) { return new GC.Spread.Sheets.Range(0, 0, rowCount, columnCount); } else if (cellRange.row == -1) { return new GC.Spread.Sheets.Range(0, cellRange.col, rowCount, cellRange.colCount); } else if (cellRange.col == -1) { return new GC.Spread.Sheets.Range(cellRange.row, 0, cellRange.rowCount, columnCount); } return cellRange; } initSpread($event: any) { this.spread = $event.spread; let spread = this.spread, sheet = spread.getSheet(0); let self = this; sheet.suspendPaint(); var data = [1, -2, -1, 6, 4, -4, 3, 8]; var dateAxis = [new Date(2011, 0, 5), new Date(2011, 0, 1), new Date(2011, 1, 11), new Date(2011, 2, 1), new Date(2011, 1, 1), new Date(2011, 1, 3), new Date(2011, 2, 6), new Date(2011, 1, 19)]; sheet.setValue(0, 0, "Series 1"); sheet.setValue(0, 1, "Series 2"); for (let i = 0; i < 8; i++) { sheet.setValue(i + 1, 0, data[i]); sheet.getCell(i + 1, 1).value(dateAxis[i]).formatter("yyyy-mm-dd"); } sheet.setColumnWidth(1, 100); sheet.setValue(11, 0, "*Data Range is A2-A9"); sheet.setValue(12, 0, "*Date axis range is B2-B9"); var dataRange = new GC.Spread.Sheets.Range(1, 0, 8, 1); var dateAxisRange = new GC.Spread.Sheets.Range(1, 1, 8, 1); sheet.getCell(0, 5).text("Sparkline without dateAxis:"); sheet.getCell(1, 5).text("(1) Line"); sheet.getCell(1, 8).text("(2) Column"); sheet.getCell(1, 11).text("(3) Winloss"); sheet.getCell(7, 5).text("Sparkline with dateAxis:"); sheet.getCell(8, 5).text("(1) Line"); sheet.getCell(8, 8).text("(2) Column"); sheet.getCell(8, 11).text("(3) Winloss"); //sparkline settings var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting(); setting.options.showMarkers = true; setting.options.lineWeight = 3; setting.options.displayXAxis = true; setting.options.showFirst = true; setting.options.showLast = true; setting.options.showLow = true; setting.options.showHigh = true; setting.options.showNegative = true; //line sheet.addSpan(2, 5, 4, 3); sheet.setSparkline(2, 5, dataRange , GC.Spread.Sheets.Sparklines.DataOrientation.vertical , GC.Spread.Sheets.Sparklines.SparklineType.line , setting ); sheet.addSpan(9, 5, 4, 3); sheet.setSparkline(9, 5, dataRange , GC.Spread.Sheets.Sparklines.DataOrientation.vertical , GC.Spread.Sheets.Sparklines.SparklineType.line , setting , dateAxisRange , GC.Spread.Sheets.Sparklines.DataOrientation.vertical ); //column sheet.addSpan(2, 8, 4, 3); sheet.setSparkline(2, 8, dataRange , GC.Spread.Sheets.Sparklines.DataOrientation.vertical , GC.Spread.Sheets.Sparklines.SparklineType.column , setting ); sheet.addSpan(9, 8, 4, 3); sheet.setSparkline(9, 8, dataRange , GC.Spread.Sheets.Sparklines.DataOrientation.vertical , GC.Spread.Sheets.Sparklines.SparklineType.column , setting , dateAxisRange , GC.Spread.Sheets.Sparklines.DataOrientation.vertical ); //winloss sheet.addSpan(2, 11, 4, 3); sheet.setSparkline(2, 11, dataRange , GC.Spread.Sheets.Sparklines.DataOrientation.vertical , GC.Spread.Sheets.Sparklines.SparklineType.winloss , setting ); sheet.addSpan(9, 11, 4, 3); sheet.setSparkline(9, 11, dataRange , GC.Spread.Sheets.Sparklines.DataOrientation.vertical , GC.Spread.Sheets.Sparklines.SparklineType.winloss , setting , dateAxisRange , GC.Spread.Sheets.Sparklines.DataOrientation.vertical ); sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, selectionChangedCallback); sheet.resumePaint(); function selectionChangedCallback() { let sheet = spread.getActiveSheet(); let sparkline = sheet.getSparkline(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (sparkline) { updateSetting(sparkline); } else { initSetting(); } } function updateSetting(sparkline: any) { let type = sparkline.sparklineType(), orientation = sparkline.dataOrientation(), row = sparkline.row, column = sparkline.column; self.position = { row: row, col: column, rowCol: row + ',' + column }; self._selectOption('line_type', type); self._selectOption('line_orientation', orientation); } function initSetting() { self.position = { row: undefined, col: undefined, rowCol: '' }; self._selectOption('line_type', 0); self._selectOption('line_orientation', 0); } } } @NgModule({ imports: [BrowserModule, SpreadSheetsModule], declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/angular/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Polyfills --> <script src="$DEMOROOT$/zh/angular/node_modules/core-js/client/shim.min.js"></script> <script src="$DEMOROOT$/zh/angular/node_modules/zone.js/fesm2015/zone.min.js"></script> <!-- SystemJS --> <script src="$DEMOROOT$/zh/angular/node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.import('@angular/compiler'); System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('$DEMOROOT$/zh/lib/angular/license.ts'); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div class="sample-tutorial"> <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"> <gc-worksheet [allowCellOverflow] = true> </gc-worksheet> </gc-spread-sheets> <div class="options-container"> <div class="option-group"> <label><b>Add SparkLine:</b></label> </div> <hr> <div class="option-group"> <label>1. Select the data range in the sheet</label> </div> <div class="option-group"> <label for="line_position">2. Enter destination cell (row,column index)</label> <input value="{{position.rowCol}}" id="line_position" (change)="setPosition($event)" /> </div> <div class="option-group"> <label for="line_position">3. Change the type and orientation</label> </div> <div class="option-group"> <label for="line_type" style="width: auto;">Type:</label> <select id="line_type" class="position" value="{{type}}" (change)="setType($event)"> <option value="0">line</option> <option value="1">column</option> <option value="2">winloss</option> </select> </div> <div class="option-group"> <label for="line_orientation">Orientation:</label> <select id="line_orientation" class="position" value="{{orientation}}" (change)="setOrientation($event)"> <option value="0">Vertical</option> <option value="1">Horizontal</option> </select> </div> <div class="option-group"> <label for="line_position">4. Click "Add Sparkline" button</label> </div> <div class="option-group"> <input type="button" value="Add Sparkline" id="btnAddSparkline" (click)="addSprikline($event)"> </div> <br> <div> <label><b>Remove SparkLine:</b></label> </div> <hr> <div class="option-group"> <label>1. Select Sparkline</label> </div> <div class="option-group"> <label for="line_position">2. Click "Clear Sparkline" button</label> </div> <div class="option-group"> <input type="button" value="Clear Sparkline" id="btnClearSparkline" (click)="clearSprikline($event)"> </div> </div> </div>
.sample { position: relative; height: 100%; overflow: auto; } .sample::after { display: block; content: ""; clear: both; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } p{ padding:2px 10px; background-color:#F4F8EB; } .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: 8px; } input, select { margin-top: 6px; padding: 4px 4px; width: 100%; box-sizing: border-box; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
(function(global) { System.config({ transpiler: 'ts', typescriptOptions: { tsconfig: true }, meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', 'zone': 'npm:zone.js/fesm2015/zone.min.js', 'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js', '@angular/core': 'npm:@angular/core/fesm2022', '@angular/common': 'npm:@angular/common/fesm2022/common.mjs', '@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs', '@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs', '@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs', '@angular/router': 'npm:@angular/router/fesm2022/router.mjs', '@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', 'ts': './plugin.js', 'tslib':'npm:tslib/tslib.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js', '@grapecity-software/spread-sheets': 'npm:@grapecity-software/spread-sheets/index.js', '@grapecity-software/spread-sheets-resources-zh': 'npm:@grapecity-software/spread-sheets-resources-zh/index.js', '@grapecity-software/spread-sheets-angular': 'npm:@grapecity-software/spread-sheets-angular/fesm2020/grapecity-software-spread-sheets-angular.mjs', '@grapecity-software/jsob-test-dependency-package/react-components': 'npm:@grapecity-software/jsob-test-dependency-package/react-components/index.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, "node_modules/@angular": { defaultExtension: 'mjs' }, "@grapecity-software/spread-sheets-angular": { defaultExtension: 'mjs' }, '@angular/core': { defaultExtension: 'mjs', main: 'core.mjs' } } }); })(this);