SpreadJS 데모
기능별 학습
스파크라인
분사형

분사형

분사형 스파크라인을 사용하여 다양한 스타일로 값을 비교할 수 있습니다.

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

수식에서 다음과 같이 SpreadSparkline 함수를 사용하여 확산 스파크라인을 만들 수 있습니다. =SPREADSPARKLINE(points, showAverage?, scaleStart?, scaleEnd?, style?, colorScheme?, vertical?).

이 함수에는 다음과 같은 매개 변수가 있습니다.

points: 값이 포함된 셀 범위를 나타내는 참조입니다(예: "A1:A10").

showAverage\: (선택 사항) 평균을 표시할지 여부를 나타내는 부울입니다. 기본값은 false입니다.

scaleStart\: (선택 사항) 스파크라인의 최소 경계를 나타내는 숫자 또는 참조입니다. 기본값은 모든 값의 최소값입니다.

scaleEnd\: (선택 사항) 스파크라인의 최대 경계를 나타내는 숫자 또는 참조입니다. 기본값은 모든 값의 최대값입니다.

style\: (선택 사항) Spread 스파크라인의 스타일에 대한 번호 참조입니다. 다음 중 하나입니다.

  • 1: 누적 - 가운데에서 양옆으로 선
  • 2: 스프레드 - 가운데에서 양옆으로 점
  • 3: 지터 - 임의 위치의 점
  • 4: (기본값) 막대 - 한쪽에서 다른 쪽으로 선
  • 5: StackedDots - 한쪽에서 다른 쪽으로 점
  • 6: 줄무늬 - 길이가 같은 선

colorScheme\: (선택 사항) 스파크라인의 상자 색을 나타내는 문자열입니다. 기본값은 "#646464"입니다.

vertical\: (선택 사항) 스파크라인을 세로로 표시할지 여부를 나타내는 부울입니다. 기본값은 false입니다.

수식에서 다음과 같이 SpreadSparkline 함수를 사용하여 확산 스파크라인을 만들 수 있습니다. =SPREADSPARKLINE(points, showAverage?, scaleStart?, scaleEnd?, style?, colorScheme?, vertical?). 이 함수에는 다음과 같은 매개 변수가 있습니다. points: 값이 포함된 셀 범위를 나타내는 참조입니다(예: "A1:A10"). showAverage\: (선택 사항) 평균을 표시할지 여부를 나타내는 부울입니다. 기본값은 false입니다. scaleStart\: (선택 사항) 스파크라인의 최소 경계를 나타내는 숫자 또는 참조입니다. 기본값은 모든 값의 최소값입니다. scaleEnd\: (선택 사항) 스파크라인의 최대 경계를 나타내는 숫자 또는 참조입니다. 기본값은 모든 값의 최대값입니다. style\: (선택 사항) Spread 스파크라인의 스타일에 대한 번호 참조입니다. 다음 중 하나입니다. 1: 누적 - 가운데에서 양옆으로 선 2: 스프레드 - 가운데에서 양옆으로 점 3: 지터 - 임의 위치의 점 4: (기본값) 막대 - 한쪽에서 다른 쪽으로 선 5: StackedDots - 한쪽에서 다른 쪽으로 점 6: 줄무늬 - 길이가 같은 선 colorScheme\: (선택 사항) 스파크라인의 상자 색을 나타내는 문자열입니다. 기본값은 "#646464"입니다. vertical\: (선택 사항) 스파크라인을 세로로 표시할지 여부를 나타내는 부울입니다. 기본값은 false입니다.
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import './styles.css'; import { AppFunc } from './app-func'; // import { App } from './app-class'; // 1. Functional Component sample ReactDOM.render(<AppFunc />, document.getElementById('app')); // 2. Class Component sample // ReactDOM.render(<App />, document.getElementById('app'));
import * as React from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react'; import '@mescius/spread-sheets-resources-ko'; GC.Spread.Common.CultureManager.culture("ko-kr"); export function AppFunc() { let spread = null; const initHorizontalSparkline = (sheet, name) => { let c, r; let spreadNS = GC.Spread.Sheets; sheet.suspendPaint(); sheet.name(name); sheet.getCell(0, 0).value("USA State-Wide Weather Averages").font("20px Arial").vAlign(spreadNS.VerticalAlign.center); sheet.setArray(1, 0, [["State", "Temperature", "Precipitation", "Snow (days)", "Sun (clear days)", "Morning Humidity", "Afternoon Humidity"]]); for (c = 0; c <= 6; c++) { sheet.setColumnWidth(c, 130); } sheet.setRowHeight(0, 40); sheet.setRowHeight(3, 40); sheet.setArray(2, 1, [["Style: Stacked (1)", "Style: Spread (2)", "Style: Jitter (3)", "Style: Poles (4)", "Style: StackedDots (5)", "Style: Stripe (6)"]]); sheet.setArray(4, 0, [ ["Alabama", 62.8, 58.3, 0.8, 99, 0.84, 0.52], ["Alaska", 26.6, 22.5, 48.0, 61, 0.77, 0.64], ["Arizona", 60.3, 13.6, 0.3, 193, 0.53, 0.25], ["Arkansas", 60.5, 50.6, 3.8, 123, 0.85, 0.49], ["California", 59.4, 22.2, 0.0, 146, 0.76, 0.62], ["Colorado", 45.2, 15.9, 19.1, 136, 0.60, 0.35], ["Connecticut", 49.1, 50.3, 20.1, 82, 0.79, 0.52], ["Delaware", 55.3, 45.7, 11.8, 97, 0.79, 0.54], ["Florida", 70.8, 54.5, 0.0, 101, 0.87, 0.57], ["Georgia", 63.6, 50.7, 0.7, 112, 0.86, 0.50], ["Hawaii", 70.0, 63.7, 0.0, 90, 0.71, 0.56], ["Idaho", 44.4, 18.9, 19.4, 120, 0.68, 0.41], ["Illinois", 51.8, 39.2, 19.9, 95, 0.83, 0.58], ["Indiana", 51.7, 41.7, 23.5, 88, 0.83, 0.58], ["Iowa", 47.8, 34.0, 26.2, 105, 0.78, 0.56], ["Kansas", 54.3, 28.9, 10.0, 128, 0.80, 0.50], ["Kentucky", 55.6, 48.9, 11.8, 93, 0.79, 0.55], ["Louisiana", 66.4, 60.1, 0.1, 101, 0.87, 0.61], ["Maine", 41.0, 42.2, 27.8, 101, 0.82, 0.61], ["Maryland", 54.2, 44.5, 9.6, 105, 0.77, 0.52], ["Massachusetts", 47.9, 47.7, 22.4, 98, 0.75, 0.59], ["Michigan", 44.5, 32.8, 44.7, 71, 0.84, 0.61], ["Minnesota", 41.2, 27.3, 37.3, 95, 0.78, 0.55], ["Mississippi", 63.4, 59.0, 0.6, 111, 0.91, 0.54], ["Missouri", 54.5, 42.2, 11.5, 115, 0.82, 0.53], ["Montana", 42.7, 15.3, 32.9, 82, 0.71, 0.45], ["Nebraska", 48.8, 23.6, 18.3, 117, 0.82, 0.53], ["Nevada", 49.9, 9.5, 16.3, 158, 0.71, 0.32], ["New Hampshire", 43.8, 43.4, 29.8, 90, 0.84, 0.53], ["New Jersey", 52.7, 47.1, 8.7, 94, 0.83, 0.59], ["New Mexico", 53.4, 14.6, 9.5, 167, 0.60, 0.29], ["New York", 45.4, 41.8, 66.4, 63, 0.82, 0.61], ["North Carolina", 59.1, 50.3, 3.9, 109, 0.83, 0.52], ["North Dakota", 40.5, 17.8, 45.2, 93, 0.80, 0.51], ["Ohio", 50.8, 39.1, 30.4, 72, 0.80, 0.57], ["Oklahoma", 59.6, 36.5, 5.6, 139, 0.79, 0.48], ["Oregon", 48.4, 27.4, 2.2, 68, 0.85, 0.59], ["Pennsylvania", 48.8, 42.9, 19.4, 87, 0.77, 0.54], ["Rhode Island", 50.1, 47.9, 18.7, 98, 0.78, 0.57], ["South Carolina", 62.5, 49.8, 0.3, 115, 0.86, 0.49], ["South Dakota", 45.2, 20.1, 30.1, 104, 0.83, 0.53], ["Tennessee", 57.7, 54.2, 6.2, 102, 0.84, 0.53], ["Texas", 64.9, 28.9, 1.3, 135, 0.82, 0.49], ["Utah", 48.6, 12.2, 34.8, 125, 0.67, 0.43], ["Vermont", 42.9, 42.7, 54.4, 58, 0.77, 0.58], ["Virginia", 55.2, 44.3, 6.1, 100, 0.84, 0.52], ["Washington", 48.3, 38.4, 3.0, 58, 0.83, 0.62], ["West Virginia", 51.8, 45.2, 37.7, 60, 0.83, 0.59], ["Wisconsin", 43.2, 32.6, 38.7, 89, 0.84, 0.58], ["Wyoming", 42.0, 12.9, 36.7, 114, 0.63, 0.43] ]); for (c = 1; c <= 6; c++) { var columnChar = String.fromCharCode(65 + c); var styleType = c; sheet.setFormula(3, c, "=SPREADSPARKLINE(" + columnChar + "5:" + columnChar + "54,TRUE,,," + styleType + ",\"#82BC00\")"); } sheet.getRange(4, 1, 50, 1).formatter("0 °F"); sheet.getRange(4, 2, 50, 1).formatter("0 in"); sheet.getRange(4, 5, 50, 1).formatter("0 %"); sheet.getRange(4, 6, 50, 1).formatter("0 %"); sheet.addColumns(6, 1); sheet.addColumns(5, 1); sheet.addColumns(4, 1); sheet.addColumns(3, 1); sheet.addColumns(2, 1); sheet.addColumns(1, 1); sheet.addSpan(0, 0, 1, 13); sheet.getRange(1, 0, 1, 13).foreColor("white").backColor("#999999").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); for (c = 1; c < 13; c += 2) { sheet.setColumnWidth(c, 15); } sheet.resumePaint(); } const initVerticalSparkline = (sheet, name) => { let c, r; let spreadNS = GC.Spread.Sheets; sheet.suspendPaint(); sheet.name(name); sheet.getCell(0, 0).value("USA State-Wide Weather Averages").font("20px Arial").vAlign(spreadNS.VerticalAlign.center); for (c = 0; c <= 5; c++) { sheet.setColumnWidth(c, 130); } sheet.setRowHeight(0, 40); sheet.setRowHeight(3, 100); sheet.setArray(1, 0, [["Temperature", "Precipitation", "Snow (days)", "Sun (clear days)", "Morning Humidity", "Afternoon Humidity"], ["Style: Stacked (1)", "Style: Spread (2)", "Style: Jitter (3)", "Style: Poles (4)", "Style: StackedDots (5)", "Style: Stripe (6)"]]); sheet.setFormula(3, 0, '=SPREADSPARKLINE(Horizontal!C5:C54,TRUE,,,1,"#82BC00",TRUE)'); sheet.setFormula(3, 1, '=SPREADSPARKLINE(Horizontal!E5:E54,TRUE,,,2,"#82BC00",TRUE)'); sheet.setFormula(3, 2, '=SPREADSPARKLINE(Horizontal!G5:G54,TRUE,,,3,"#82BC00",TRUE)'); sheet.setFormula(3, 3, '=SPREADSPARKLINE(Horizontal!I5:I54,TRUE,,,4,"#82BC00",TRUE)'); sheet.setFormula(3, 4, '=SPREADSPARKLINE(Horizontal!K5:K54,TRUE,,,5,"#82BC00",TRUE)'); sheet.setFormula(3, 5, '=SPREADSPARKLINE(Horizontal!M5:M54,TRUE,,,6,"#82BC00",TRUE)'); sheet.addColumns(5, 1); sheet.addColumns(4, 1); sheet.addColumns(3, 1); sheet.addColumns(2, 1); sheet.addColumns(1, 1); for (c = 1; c < 11; c += 2) { sheet.setColumnWidth(c, 15); } sheet.addSpan(0, 0, 1, 11); sheet.getRange(1, 0, 1, 11).foreColor("white").backColor("#999999").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.resumePaint(); } const initSpread = (currSpread) => { spread = currSpread; initHorizontalSparkline(spread.sheets[0], "Horizontal"); initVerticalSparkline(spread.sheets[1], "Vertical"); } return ( <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => initSpread(spread)} newTabVisible={false}> <Worksheet> </Worksheet> <Worksheet> </Worksheet> </SpreadSheets> </div> </div> ); }
import * as React from 'react'; import GC from '@mescius/spread-sheets'; import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react'; import '@mescius/spread-sheets-resources-ko'; GC.Spread.Common.CultureManager.culture("ko-kr"); const Component = React.Component; export class App extends Component { constructor(props) { super(props); this.spread = null; } render() { return ( <div class="sample-tutorial"> <div class="sample-spreadsheets"> <SpreadSheets workbookInitialized={spread => this.initSpread(spread)} newTabVisible={false}> <Worksheet> </Worksheet> <Worksheet> </Worksheet> </SpreadSheets> </div> </div> ) } initHorizontalSparkline(sheet, name) { let c, r; let spreadNS = GC.Spread.Sheets; sheet.suspendPaint(); sheet.name(name); sheet.getCell(0, 0).value("USA State-Wide Weather Averages").font("20px Arial").vAlign(spreadNS.VerticalAlign.center); sheet.setArray(1, 0, [["State", "Temperature","Precipitation", "Snow (days)", "Sun (clear days)", "Morning Humidity", "Afternoon Humidity"]]); for (c = 0; c <= 6; c++) { sheet.setColumnWidth(c, 130); } sheet.setRowHeight(0, 40); sheet.setRowHeight(3, 40); sheet.setArray(2, 1, [["Style: Stacked (1)", "Style: Spread (2)", "Style: Jitter (3)", "Style: Poles (4)", "Style: StackedDots (5)", "Style: Stripe (6)"]]); sheet.setArray(4, 0, [ ["Alabama",62.8,58.3,0.8,99,0.84,0.52],["Alaska",26.6,22.5,48.0,61,0.77,0.64], ["Arizona",60.3,13.6,0.3,193,0.53,0.25],["Arkansas",60.5,50.6,3.8,123,0.85,0.49], ["California",59.4,22.2,0.0,146,0.76,0.62],["Colorado",45.2,15.9,19.1,136,0.60,0.35], ["Connecticut",49.1,50.3,20.1,82,0.79,0.52],["Delaware",55.3,45.7,11.8,97,0.79,0.54], ["Florida",70.8,54.5,0.0,101,0.87,0.57],["Georgia",63.6,50.7,0.7,112,0.86,0.50], ["Hawaii",70.0,63.7,0.0,90,0.71,0.56],["Idaho",44.4,18.9,19.4,120,0.68,0.41], ["Illinois",51.8,39.2,19.9,95,0.83,0.58],["Indiana",51.7,41.7,23.5,88,0.83,0.58], ["Iowa",47.8,34.0,26.2,105,0.78,0.56],["Kansas",54.3,28.9,10.0,128,0.80,0.50], ["Kentucky",55.6,48.9,11.8,93,0.79,0.55],["Louisiana",66.4,60.1,0.1,101,0.87,0.61], ["Maine",41.0,42.2,27.8,101,0.82,0.61],["Maryland",54.2,44.5,9.6,105,0.77,0.52], ["Massachusetts",47.9,47.7,22.4,98,0.75,0.59],["Michigan",44.5,32.8,44.7,71,0.84,0.61], ["Minnesota",41.2,27.3,37.3,95,0.78,0.55],["Mississippi",63.4,59.0,0.6,111,0.91,0.54], ["Missouri",54.5,42.2,11.5,115,0.82,0.53],["Montana",42.7,15.3,32.9,82,0.71,0.45], ["Nebraska",48.8,23.6,18.3,117,0.82,0.53],["Nevada",49.9,9.5,16.3,158,0.71,0.32], ["New Hampshire",43.8,43.4,29.8,90,0.84,0.53],["New Jersey",52.7,47.1,8.7,94,0.83,0.59], ["New Mexico",53.4,14.6,9.5,167,0.60,0.29],["New York",45.4,41.8,66.4,63,0.82,0.61], ["North Carolina",59.1,50.3,3.9,109,0.83,0.52],["North Dakota",40.5,17.8,45.2,93,0.80,0.51], ["Ohio",50.8,39.1,30.4,72,0.80,0.57],["Oklahoma",59.6,36.5,5.6,139,0.79,0.48], ["Oregon",48.4,27.4,2.2,68,0.85,0.59],["Pennsylvania",48.8,42.9,19.4,87,0.77,0.54], ["Rhode Island",50.1,47.9,18.7,98,0.78,0.57],["South Carolina",62.5,49.8,0.3,115,0.86,0.49], ["South Dakota",45.2,20.1,30.1,104,0.83,0.53],["Tennessee",57.7,54.2,6.2,102,0.84,0.53], ["Texas",64.9,28.9,1.3,135,0.82,0.49],["Utah",48.6,12.2,34.8,125,0.67,0.43], ["Vermont",42.9,42.7,54.4,58,0.77,0.58],["Virginia",55.2,44.3,6.1,100,0.84,0.52], ["Washington",48.3,38.4,3.0,58,0.83,0.62],["West Virginia",51.8,45.2,37.7,60,0.83,0.59], ["Wisconsin",43.2,32.6,38.7,89,0.84,0.58],["Wyoming",42.0,12.9,36.7,114,0.63,0.43] ]); for (c = 1; c <= 6; c++) { var columnChar = String.fromCharCode(65 + c); var styleType = c; sheet.setFormula(3, c, "=SPREADSPARKLINE(" + columnChar + "5:" + columnChar + "54,TRUE,,,"+ styleType + ",\"#82BC00\")"); } sheet.getRange(4,1,50,1).formatter("0 °F"); sheet.getRange(4,2,50,1).formatter("0 in"); sheet.getRange(4,5,50,1).formatter("0 %"); sheet.getRange(4,6,50,1).formatter("0 %"); sheet.addColumns(6, 1); sheet.addColumns(5, 1); sheet.addColumns(4, 1); sheet.addColumns(3, 1); sheet.addColumns(2, 1); sheet.addColumns(1, 1); sheet.addSpan(0, 0, 1, 13); sheet.getRange(1, 0, 1, 13).foreColor("white").backColor("#999999").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); for (c = 1; c < 13; c += 2) { sheet.setColumnWidth(c, 15); } sheet.resumePaint(); } initVerticalSparkline(sheet, name) { let c, r; let spreadNS = GC.Spread.Sheets; sheet.suspendPaint(); sheet.name(name); sheet.getCell(0, 0).value("USA State-Wide Weather Averages").font("20px Arial").vAlign(spreadNS.VerticalAlign.center); for (c = 0; c <= 5; c++) { sheet.setColumnWidth(c, 130); } sheet.setRowHeight(0, 40); sheet.setRowHeight(3, 100); sheet.setArray(1, 0, [["Temperature","Precipitation", "Snow (days)", "Sun (clear days)", "Morning Humidity", "Afternoon Humidity"], ["Style: Stacked (1)", "Style: Spread (2)", "Style: Jitter (3)", "Style: Poles (4)", "Style: StackedDots (5)", "Style: Stripe (6)"]]); sheet.setFormula(3, 0, '=SPREADSPARKLINE(Horizontal!C5:C54,TRUE,,,1,"#82BC00",TRUE)'); sheet.setFormula(3, 1, '=SPREADSPARKLINE(Horizontal!E5:E54,TRUE,,,2,"#82BC00",TRUE)'); sheet.setFormula(3, 2, '=SPREADSPARKLINE(Horizontal!G5:G54,TRUE,,,3,"#82BC00",TRUE)'); sheet.setFormula(3, 3, '=SPREADSPARKLINE(Horizontal!I5:I54,TRUE,,,4,"#82BC00",TRUE)'); sheet.setFormula(3, 4, '=SPREADSPARKLINE(Horizontal!K5:K54,TRUE,,,5,"#82BC00",TRUE)'); sheet.setFormula(3, 5, '=SPREADSPARKLINE(Horizontal!M5:M54,TRUE,,,6,"#82BC00",TRUE)'); sheet.addColumns(5, 1); sheet.addColumns(4, 1); sheet.addColumns(3, 1); sheet.addColumns(2, 1); sheet.addColumns(1, 1); for (c = 1; c < 11; c += 2) { sheet.setColumnWidth(c, 15); } sheet.addSpan(0, 0, 1, 11); sheet.getRange(1, 0, 1, 11).foreColor("white").backColor("#999999").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center); sheet.resumePaint(); } initSpread(spread) { this.spread = spread; this.initHorizontalSparkline(spread.sheets[0], "Horizontal"); this.initVerticalSparkline(spread.sheets[1], "Vertical"); } }
<!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"> <!-- SystemJS --> <script src="$DEMOROOT$/ko/react/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('$DEMOROOT$/ko/lib/react/license.js').then(function () { System.import('./src/app'); }); </script> </head> <body> <div id="app" style="height: 100%;"></div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .sample-spreadsheets { height: 100%; }
(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': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/index.js', '@mescius/spread-sheets-react': 'npm:@mescius/spread-sheets-react/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);