SpreadJS 데모
비즈니스 특화 기능
리포트시트
차트
셀 바인딩 차트

셀 바인딩 차트

차트는 ReportSheets에 추가될 수 있으며 데이터 관리자의 특정 데이터 필드에 바인딩할 수 있습니다. 그런 다음 표준 SpreadJS 스파크라인과 유사하게 특정 셀에 배치할 수 있습니다. 아래 데모는 템플릿 시트에 정의된 대로 데이터 관리자의 특정 필드에 바인딩되어 있고 데이터 옆 셀에 표시되는 차트를 보여줍니다.

JavaScript
Angular
Vue3
React
설명
app.jsx
app-func.jsx
index.html
styles.css

이 보고서는 fromJSON을 사용하여 사전 정의된 템플릿을 로드합니다. 새 창에서 샘플을 열어 SpreadJS 디자이너의 보고서 시트 설정을 확인할 수 있습니다.

디자이너를 여는 방법

window.onload = async () => {
    const loadingTip = addLoadingTip();
    const { spread, designer } = createSpreadAndDesigner();
    const res = await fetch('$DEMOROOT$/ko/sample/features/report-sheet/chart/cell-binding-chart/spread.json');
    await spread.fromJSON(await res.json());
    loadingTip.remove();
    if (designer) {
        designer.refresh();
    }
}

function createSpreadAndDesigner() {
    const demoHost = document.getElementById('demo-host');
    if (window !== top) {
        return {
            spread: new GC.Spread.Sheets.Workbook(demoHost, { sheetCount: 1 }),
        }
    } else {
        const designer = new GC.Spread.Sheets.Designer.Designer(demoHost, undefined, undefined, { sheetCount: 1 });
        return {
            designer,
            spread: designer.getWorkbook(),
        }
    }
}
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;
}
이 보고서는 fromJSON을 사용하여 사전 정의된 템플릿을 로드합니다. 새 창에서 샘플을 열어 SpreadJS 디자이너의 보고서 시트 설정을 확인할 수 있습니다.
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import './styles.css'; import { AppFunc } from './app-func'; ReactDOM.render(<AppFunc />, document.getElementById('app'));
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { SpreadSheets } from '@mescius/spread-sheets-react'; 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-resources-ko'; import '@mescius/spread-sheets-designer-resources-ko'; GC.Spread.Common.CultureManager.culture("ko-kr"); import { Designer } from '@mescius/spread-sheets-designer-react'; import './styles.css'; import '$DEMOROOT$/spread/source/js/react_vue/license.js'; import { registerlic } from '$DEMOROOT$/spread/source/js/designer/react_vue/license.js'; registerlic(GC); export function AppFunc() { return ( <div class='demo-host'> <div id="report-sheet-parameter-ui" class="parameter-ui"></div> {top === window ? <Designer styleInfo={{ height: '100%' }} designerInitialized={initDesigner} /> : <div class="demo"> <SpreadSheets workbookInitialized={initSpread} /> </div> } </div> ); } async function initDesigner(designer) { await initSpread(designer.getWorkbook()); let parameterUIHost = document.getElementById("report-sheet-parameter-ui"); parameterUIHost.style.display = "none"; designer.refresh(); } async function initSpread(spread, inDesigner) { spread.suspendPaint(); spread.setSheetCount(1); const loadingTip = addLoadingTip(); const res = await fetch('$DEMOROOT$/ko/sample/features/report-sheet/chart/cell-binding-chart/spread.json'); await spread.fromJSON(await res.json()); if (!inDesigner) { initParameterFilterReportParameterUI(spread.getActiveSheetTab()); } 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; } function initParameterFilterReportParameterUI (reportSheet) { let parameterUIHost = document.getElementById("report-sheet-parameter-ui"); reportSheet.setParametersUI(parameterUIHost, initParametersUI, parameterOnChanged); } function initParametersUI (sheet) { } function parameterOnChanged (sheet, valueChangedArgs) { if (valueChangedArgs.tag === "submitOnChangeComboBox") { sheet.regenerateReport(); } }
<!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/react/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/react/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"> <script src="$DEMOROOT$/ko/react/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app" style="height: 100%;"></div> </body> </html>
body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .demo-host { width: 100%; height: 100%; overflow: hidden; } .demo { width: 100%; height: calc(100% - 60px); overflow: hidden; } .parameter-ui { width: 100%; height: 60px; overflow: hidden; float: left; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true, react: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/index.js', '@mescius/spread-sheets-designer-resources-ko': 'npm:@mescius/spread-sheets-designer-resources-ko/index.js', '@mescius/spread-sheets-designer-react': 'npm:@mescius/spread-sheets-designer-react/index.js', '@mescius/spread-sheets-designer': 'npm:@mescius/spread-sheets-designer/index.js', '@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-react': 'npm:@mescius/spread-sheets-react/index.js', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'react': 'npm:react/umd/react.production.min.js', 'react-dom': 'npm:react-dom/umd/react-dom.production.min.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' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'jsx' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);