빠른 시작

DataCharts를 사용하여 차트를 데이터 관리자 데이터에 직접 바인딩할 수 있으며 SpreadJS 통합 문서에 데이터를 저장할 필요가 없습니다. 아래 데모는 UI 내에서 DataChart를 만들고 모든 다양한 옵션을 편집하는 방법을 보여줍니다.

ReportSheets 추가 기능 사용자의 경우, DataCharts 추가 기능이 포함되어 있으며 동일한 데이터 관리자와 원활하게 통합되므로 보고서를 동적 차트로 손쉽게 보강할 수 있습니다. 스프레드시트 내에서 ReportSheets 추가 기능 외부의 DataCharts 추가 기능을 사용하려는 경우 별도의 DataCharts 추가 기능 라이선스가 필요합니다.

DataCharts 기능을 사용하려면 SpreadJS DataCharts JS 파일 링크를 문서의 헤더 섹션에 추가하십시오. 아래와 같이 sheet.dataCharts.add 메서드로 DataChart를 만들 수 있습니다.
import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { SpreadSheetsModule } from '@mescius/spread-sheets-angular'; import GC from '@mescius/spread-sheets'; import '@mescius/spread-sheets-print'; import '@mescius/spread-sheets-shapes'; import '@mescius/spread-sheets-charts'; import '@mescius/spread-sheets-reportsheet-addon'; import '@mescius/spread-sheets-datacharts-addon'; import '@mescius/spread-sheets-tablesheet'; import '@mescius/spread-sheets-ganttsheet'; import '@mescius/spread-sheets-formula-panel'; import '@mescius/spread-sheets-designer-resources-ko'; import '@mescius/spread-sheets-designer'; import { DesignerModule } from "@mescius/spread-sheets-designer-angular"; import './styles.css'; import '$DEMOROOT$/spread/source/js/angular/license.ts'; import { registerlic } from '$DEMOROOT$/spread/source/js/designer/react_vue/license.js'; import '@mescius/spread-sheets-resources-ko'; GC.Spread.Common.CultureManager.culture("ko-kr"); registerlic(GC); @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { showDesigner = top === window; props = {}; hostStyle: any; constructor() { if (!this.showDesigner) { this.hostStyle = { width: '100%', height: '100%', overflow: 'hidden', float: 'left' }; } } initDesigner($event) { initDesigner($event.designer); } initSpread($event) { initSpread($event.spread); } } async function initDesigner(designer) { await initSpread(designer.getWorkbook()); designer.refresh(); } async function initSpread(spread) { spread.suspendPaint(); spread.setSheetCount(1); const loadingTip = addLoadingTip(); const res = await fetch('$DEMOROOT$/ko/sample/features/data-charts/quick-start/spread.json'); await spread.fromJSON(await res.json()); new GC.Spread.Sheets.DataCharts.DataChartConfigPanel('panel-host', spread); spread.getActiveSheet().dataCharts.all()[0].isSelected(true); loadingTip.remove(); spread.resumePaint(); } function addLoadingTip() { const div = document.createElement('div'); div.style.position = 'absolute'; div.style.inset = '0'; div.style.display = 'flex'; div.style.alignItems = 'center'; div.style.justifyContent = 'center'; div.style.background = 'white'; div.style.zIndex = '100'; div.textContent = 'Loading data from server ...'; document.body.appendChild(div); return div; } @NgModule({ imports: [BrowserModule, SpreadSheetsModule, DesignerModule], 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$/ko/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/angular/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"> <!-- Polyfills --> <script src="$DEMOROOT$/ko/angular/node_modules/core-js/client/shim.min.js"></script> <script src="$DEMOROOT$/ko/angular/node_modules/zone.js/fesm2015/zone.min.js"></script> <!-- SystemJS --> <script src="$DEMOROOT$/ko/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('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div class="sample-tutorial"> <designer *ngIf="showDesigner" [props]="props" (designerInitialized)="initDesigner($event)"></designer> <div id="spread-host" *ngIf="!showDesigner" > <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"></gc-spread-sheets> </div> <div id="panel-host" *ngIf="!showDesigner" ></div> </div>
body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .gc-designer-container { height: 100%; width: 100%; } #spread-host { position: absolute; top: 0; left: 0; width: calc(100% - 380px); height: 100%; } #panel-host { position: absolute; top: 0; right: 0; width: 380px; height: 100%; }
(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', '@mescius/spread-sheets-designer-resources-ko': 'npm:@mescius/spread-sheets-designer-resources-ko/index.js', '@mescius/spread-sheets-designer': 'npm:@mescius/spread-sheets-designer/index.js', '@mescius/spread-sheets-designer-angular': 'npm:@mescius/spread-sheets-designer-angular/fesm2020/mescius-spread-sheets-designer-angular.mjs', '@mescius/spread-excelio': 'npm:@mescius/spread-excelio/index.js', '@mescius/spread-sheets-barcode': 'npm:@mescius/spread-sheets-barcode/index.js', '@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js', '@mescius/spread-sheets-languagepackages': 'npm:@mescius/spread-sheets-languagepackages/index.js', '@mescius/spread-sheets-print': 'npm:@mescius/spread-sheets-print/index.js', '@mescius/spread-sheets-pdf': 'npm:@mescius/spread-sheets-pdf/index.js', '@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.js', '@mescius/spread-sheets-io': 'npm:@mescius/spread-sheets-io/index.js', '@mescius/spread-sheets-reportsheet-addon': 'npm:@mescius/spread-sheets-reportsheet-addon/index.js', '@mescius/spread-sheets-datacharts-addon': 'npm:@mescius/spread-sheets-datacharts-addon/index.js', '@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js', '@mescius/spread-sheets-ganttsheet': 'npm:@mescius/spread-sheets-ganttsheet/index.js', '@mescius/spread-sheets-formula-panel': 'npm:@mescius/spread-sheets-formula-panel/index.js', '@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/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' }, "@mescius/spread-sheets-angular": { defaultExtension: 'mjs' }, "@mescius/spread-sheets-designer-angular": { defaultExtension: 'mjs' }, '@angular/core': { defaultExtension: 'mjs', main: 'core.mjs' } } }); })(this);