SpreadJS 데모
비즈니스 특화 기능
리포트시트
차트
여러 매개변수로 차트 날짜 필터링

여러 매개 변수로 차트 데이터 필터링

ReportSheet의 차트는 여러 매개 변수로 필터링하여 데이터의 다른 부분을 나타낼 수 있습니다. 아래 데모에서는 특정 차트 데이터를 보여주도록 지역 및 연도를 변경할 수 있습니다.

JavaScript
Angular
Vue3
React
설명
app.vue
index.html

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

디자이너를 여는 방법

window.onload = async () => {
    const loadingTip = addLoadingTip();
    const { spread, designer } = createSpreadAndDesigner();
    const res = await fetch('$DEMOROOT$/ko/sample/features/report-sheet/chart/filter-chart-data-by-multiple-parameters/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 디자이너의 ReportSheet 설정을 확인할 수 있습니다.
<template> <div class="demo-host"> <div ref="parameterRef" class="parameter-ui"></div> <gc-spread-sheets-designer class="demo-designer" v-if="showDesigner" @designerInitialized="initDesigner" /> <gc-spread-sheets class="demo-runtime" v-else @workbookInitialized="initSpread" /> </div> </template> <script setup> 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-vue'; import '@mescius/spread-sheets-resources-ko'; import '@mescius/spread-sheets-designer-resources-ko'; GC.Spread.Common.CultureManager.culture("ko-kr"); import '@mescius/spread-sheets-designer-vue'; import { ref, onMounted } from 'vue'; import '$DEMOROOT$/spread/source/js/react_vue/license.js'; import { registerlic } from '$DEMOROOT$/spread/source/js/designer/react_vue/license.js'; registerlic(GC); const showDesigner = top === window; const spreadRef = ref(null); const parameterRef = ref(null); const designerRef = ref(null); async function initDesigner(designer) { designerRef.value = designer; let parameterUIHost = parameterRef.value; parameterUIHost.style.display = "none"; await initSpread(designer.getWorkbook(), true); designer.refresh(); } onMounted(() => { parameterRef.value; }); async function initSpread(spread, inDesigner) { spreadRef.value = spread; spread.suspendPaint(); spread.setSheetCount(1); const loadingTip = addLoadingTip(); const res = await fetch('$DEMOROOT$/ko/sample/features/report-sheet/chart/filter-chart-data-by-multiple-parameters/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 = parameterRef.value; reportSheet.setParametersUI(parameterUIHost, initParametersUI, parameterOnChanged); } function initParametersUI (sheet) { } function parameterOnChanged (sheet, valueChangedArgs) { if (valueChangedArgs.tag === "submitOnChangeComboBoxYear" || valueChangedArgs.tag === "submitOnChangeComboBoxRegion") { sheet.regenerateReport(); } } </script> <style scoped> body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #app { height: 100%; } .demo-host { width: 100%; height: 100%; overflow: hidden; } .demo-designer { width: 100%; height: 100%; overflow: hidden; } .demo-runtime { width: 100%; height: calc(100% - 60px); overflow: hidden; } .parameter-ui { width: 100%; height: 60px; overflow: hidden; float: left; } </style>
<!DOCTYPE html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>SpreadJS VUE</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/vue3/node_modules/@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"> <script src="$DEMOROOT$/ko/vue3/node_modules/systemjs/dist/system.src.js"></script> <script src="./systemjs.config.js"></script> <script src="./compiler.js" type="module"></script> <script> System.import("./src/app.js"); </script> </head> <body> <div id="app"></div> </body> </html>
(function (global) { SystemJS.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, packageConfigPaths: [ './node_modules/*/package.json', "./node_modules/@mescius/*/package.json", "./node_modules/@babel/*/package.json", "./node_modules/@vue/*/package.json" ], map: { 'vue': "npm:vue/dist/vue.esm-browser.js", 'tiny-emitter': 'npm:tiny-emitter/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', "systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js", '@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-vue': 'npm:@mescius/spread-sheets-designer-vue/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-datacharts-addon': 'npm:@mescius/spread-sheets-datacharts-addon/index.js', '@mescius/spread-sheets-reportsheet-addon': 'npm:@mescius/spread-sheets-reportsheet-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-vue': 'npm:@mescius/spread-sheets-vue/index.js', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', }, meta: { '*.css': { loader: 'systemjs-plugin-css' }, '*.vue': { loader: "../plugin-vue/index.js" } } }); })(this);