계열

차트의 계열을 사용자 정의할 수 있습니다.

차트 계열은 다음 사용자 정의를 지원합니다. chartType axisGroup backColor backColorTransparency border name xValues yValues errorBars trendlines dataLabels bubbleSizes doughnutHoleSize gapWidth overlap 차트의 계열 컬렉션에서 계열 항목을 가져오거나 추가하거나 제거할 수 있을 뿐만 아니라 각 계열 항목의 이름, 테두리, 너비, 테두리 색, y 값, x 값 및 채우기 색을 사용자 정의할 수 있습니다. 데이터 레이블: 데이터 레이블을 사용하여 데이터 계열에서 데이터 요소의 세부 사항을 식별할 수 있습니다. 아래 옵션 중에서 차트의 계열 데이터 레이블 스타일을 사용자 정의할 수 있습니다. showValue showSeriesName showCategoryName showPercentage separator position format color transparency backColor backColorTransparency borderColor borderWidth borderColorTransparency bubbleSizes: 계열의 거품 크기 수식으로, 거품형 차트에 사용됩니다. doughnutHoleSize: 도넛형 차트의 구멍 크기로, 도넛형 차트에 사용됩니다. 최댓값은 0.9이고, 최솟값은 0입니다. gapWidth: 막대형 및 세로 막대형 차트 그룹과 깔때기형 유형의 간격 너비입니다. 최댓값은 5이고, 최솟값은 0입니다. overlap: 막대형 및 세로 막대형 차트 그룹과 깔때기형 유형의 겹침입니다. 최댓값은 1이고, 최솟값은 -1입니다. error bars: 오차 막대를 사용하여 차트에서 오차 여백 및 표준 편차를 빠르게 표시할 수 있습니다. 동일한 수준 디렉터리의 "오차 막대"에서 자세한 내용을 참조하십시오. trendlines: 추세선은 특정 데이터 계열에서 기울기(또는 추세)를 나타내는 추가적인 선입니다. 동일 수준 디렉터리의 "추세선"에서 자세한 내용을 참조하십시오.
var spread; window.onload = function () { spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); initSpread(spread); initEvent(spread); //readSetting(new GC.Spread.Sheets.CellTypes.CheckBoxList()); } var ColumnGroup = [ GC.Spread.Sheets.Charts.ChartType.columnClustered, GC.Spread.Sheets.Charts.ChartType.columnStacked, GC.Spread.Sheets.Charts.ChartType.columnStacked100, GC.Spread.Sheets.Charts.ChartType.clusteredColumn, GC.Spread.Sheets.Charts.ChartType.waterfall ]; var BarGroup = [ GC.Spread.Sheets.Charts.ChartType.barClustered, GC.Spread.Sheets.Charts.ChartType.barStacked, GC.Spread.Sheets.Charts.ChartType.barStacked100 ]; var positions = [ GC.Spread.Sheets.Charts.DataLabelPosition.center, GC.Spread.Sheets.Charts.DataLabelPosition.insideEnd, GC.Spread.Sheets.Charts.DataLabelPosition.outsideEnd, GC.Spread.Sheets.Charts.DataLabelPosition.bestFit, GC.Spread.Sheets.Charts.DataLabelPosition.below ]; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); var dataArray = [ ["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'], ["2014", 0.4966, 0.1801, 0.2455, 0.0470, 0.0, 0.0150, 0.0158], ["2015", 0.5689, 0.1560, 0.1652, 0.0529, 0.0158, 0.0220, 0.0192], ["2016", 0.6230, 0.1531, 0.1073, 0.0464, 0.0311, 0.0166, 0.0225], ["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246] ]; sheet.setArray(0, 0, dataArray); var columnChart = sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.column, 30, 120, 480, 270, "A1:D5"); columnChart.title({ text: "Column Chart" }); var bubbleChart = sheet.charts.add('Chart2', GC.Spread.Sheets.Charts.ChartType.bubble, 520, 120, 480, 270, "A1:D5"); bubbleChart.title({ text: "Bubble Chart" }); var DoughnutChart = sheet.charts.add('Chart3', GC.Spread.Sheets.Charts.ChartType.doughnut, 30, 400, 480, 270, "A1:D5"); DoughnutChart.title({ text: "Doughnut Chart" }); setDataLabel(columnChart); setDataLabel(bubbleChart); setDataLabel(DoughnutChart); sheet.resumePaint(); } function setDataLabel (chart) { var dataLabels = chart.series().get(0).dataLabels; dataLabels.showValue = true; dataLabels.showSeriesName = false; dataLabels.showCategoryName = false var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition; dataLabels.position = dataLabelPosition.outsideEnd; chart.series().set(0, dataLabels); } function initEvent(spread) { spread.bind(GC.Spread.Sheets.Events.FloatingElementSelected, function () { var sheet = spread.getActiveSheet(); var chart = getActiveChart(sheet); if (chart) { readSetting(chart); } }); _getElementById("apply").addEventListener('click', function () { applySetting(); }); } function readSetting(chart) { var series = chart.series().get(0); if (series.backColor && series.backColor.startsWith('#')) { _getElementById("backColor").value = series.backColor; } else { _getElementById("backColor").value = '#5b9bd5'; } if (series.border && series.border.borderColor && series.border.borderColor.startsWith('#')) { _getElementById("borderColor").value = series.border.borderColor; } else { _getElementById("borderColor").value = '#FFFFFF'; } _getElementById("backColorTransparency").value = series.backColorTransparency || 0; _getElementById("borderLineType").value = (series.border && series.border.lineType); _getElementById("borderWidth").value = (series.border && series.border.width); _getElementById("borderColorTransparency").value = (series.border && series.border.transparency); if (series.dataLabels) { _getElementById("dataLabelShowValue").checked = series.dataLabels.showValue; _getElementById("dataLabelShowSeriesName").checked = series.dataLabels.showSeriesName; _getElementById("dataLabelShowCategoryName").checked = series.dataLabels.showCategoryName; _getElementById("dataLabelShowPercentage").checked = series.dataLabels.showPercentage; _getElementById("separator").value = series.dataLabels.separator; _getElementById("position").value = positions.indexOf(series.dataLabels.position); } _getElementById("name").value = series.name; _getElementById("xValues").value = series.xValues; _getElementById("yValues").value = series.yValues; if (chart.chartType() === GC.Spread.Sheets.Charts.ChartType.bubble) { _getElementById("bubbleSizes").disabled = ''; _getElementById("bubbleSizes").value = series.bubbleSizes; } else { _getElementById("bubbleSizes").disabled = 'disabled'; _getElementById("bubbleSizes").value = ''; } if (ColumnGroup.indexOf(chart.chartType()) !==-1 || BarGroup.indexOf(chart.chartType()) !== -1) { _getElementById("gapWidth").disabled = ''; _getElementById("overlap").disabled = ''; _getElementById("gapWidth").value = series.gapWidth; _getElementById("overlap").value = series.overlap; } else { _getElementById("gapWidth").disabled = 'disabled'; _getElementById("overlap").disabled = 'disabled'; _getElementById("gapWidth").value = ''; _getElementById("overlap").value = ''; } if (chart.chartType() === GC.Spread.Sheets.Charts.ChartType.doughnut) { _getElementById("doughnutHoleSize").disabled = ''; _getElementById("doughnutHoleSize").value = series.doughnutHoleSize; } else { _getElementById("doughnutHoleSize").disabled = 'disabled'; _getElementById("doughnutHoleSize").value = ''; } } function applySetting() { var sheet = spread.getActiveSheet(); var chart = getActiveChart(sheet); if (!chart) { return; } var border = { lineType: _getValue("borderLineType"), width: _getFloat("borderWidth") || 1, color: _getText("borderColor"), transparency: _getFloat("borderColorTransparency") }; if (border.lineType && !border.width) { border.width = 1; } var series = { backColor: _getText("backColor"), backColorTransparency: _getText("backColorTransparency") || 0, name: _getText("name"), xValues: _getText("xValues"), yValues: _getText("yValues"), dataLabels: { showValue: _getBoolean("dataLabelShowValue"), showSeriesName: _getBoolean("dataLabelShowSeriesName"), showCategoryName: _getBoolean("dataLabelShowCategoryName"), showPercentage: _getBoolean("dataLabelShowPercentage"), separator: _getText("separator"), position: positions[_getValue("position")] } } if (border) { series.border = border; } if (chart.chartType() === GC.Spread.Sheets.Charts.ChartType.bubble) { series.bubbleSizes = _getFloat("bubbleSizes") } else if (ColumnGroup.indexOf(chart.chartType()) !==-1 || BarGroup.indexOf(chart.chartType()) !== -1) { series.gapWidth = _getFloat("gapWidth") series.overlap = _getFloat("overlap") } else if (chart.chartType() === GC.Spread.Sheets.Charts.ChartType.doughnut) { series.doughnutHoleSize = _getFloat("doughnutHoleSize") } chart.series().set(0, series); } function getActiveChart(sheet) { var activeChart = null; sheet.charts.all().forEach(function (chart) { if (chart.isSelected()) { activeChart = chart; } }); return activeChart; } function _getElementById(id) { return document.getElementById(id); } function _getBoolean(id) { return _getElementById(id).checked; } function _getFloat(id) { return isNaN(parseFloat(_getElementById(id).value)) ? undefined : parseFloat(_getElementById(id).value); } function _getValue(id) { return _getElementById(id).value ? parseInt(_getElementById(id).value) : undefined; } function _getText(id) { return _getElementById(id).value ? _getElementById(id).value : undefined; }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="ko-kr"/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <p>Change the properties below then press the Set button to apply.</p> <div class="option-row"> <label for="backColor">backColor</label> <input id="backColor" type="color"/> </div> <div class="option-row"> <label for="backColorTransparency">backColorTransparency</label> <input id="backColorTransparency" type="text"/> </div> <div class="option-row"> <label for="borderLineType">borderLineType</label> <select id="borderLineType"> <option value="0">solid</option> <option value="1">squareDot</option> <option value="2">dash</option> <option value="3">longDash</option> <option value="4">dashDot</option> <option value="5">longDashDot</option> <option value="6">longDashDotDot</option> <option value="7">sysDash</option> <option value="8">sysDot</option> <option value="9">sysDashDot</option> <option value="10">dashDotDot</option> <option value="11">roundDot</option> </select> </div> <div class="option-row"> <label for="borderWidth">borderWidth</label> <input id="borderWidth" type="number" min="0" max="100"/> </div> <div class="option-row"> <label for="borderColor">borderColor</label> <input id="borderColor" type="color"/> </div> <div class="option-row"> <label for="borderColorTransparency">borderColorTransparency</label> <input id="borderColorTransparency" type="number" min="0" max="1"/> </div> <div class="option-row"> <label for="dataLabelShowValue">dataLabelShowValue</label> <input type="checkbox" id="dataLabelShowValue" /> </div> <div class="option-row"> <label for="dataLabelShowSeriesName">dataLabelShowSeriesName</label> <input type="checkbox" id="dataLabelShowSeriesName" /> </div> <div class="option-row"> <label for="dataLabelShowCategoryName">dataLabelShowCategoryName</label> <input type="checkbox" id="dataLabelShowCategoryName" /> </div> <div class="option-row"> <label for="dataLabelShowPercentage">dataLabelShowPercentage</label> <input type="checkbox" id="dataLabelShowPercentage" /> </div> <div class="option-row"> <label for="separator">separator</label> <select type="text" id="separator"> <option value=",">,(comma)</option> <option value=";">;(semicolon)</option> <option value=".">,(period)</option> <option value=" ">(new line)</option> <option value=" ">(space)</option> </select> </div> <div class="option-row"> <label for="position">position</label> <select type="text" id="position"> <option value="0">Center</option> <option value="1">Inside End</option> <option value="2">Outside End</option> <option value="3">Best Fit</option> <option value="4">Below</option> </select> </div> <div class="option-row"> <label for="name">name</label> <input id="name"/> </div> <div class="option-row"> <label for="xValues">xValues</label> <input id="xValues"/> </div> <div class="option-row"> <label for="yValues">yValues</label> <input id="yValues"/> </div> <div class="option-row"> <label for="bubbleSizes">bubbleSizes</label> <input id="bubbleSizes" type="text" readonly/> </div> <div class="option-row"> <label for="doughnutHoleSize">doughnutHoleSize</label> <input id="doughnutHoleSize" type="number" step="0.1" min="0" max="0.9"/> </div> <div class="option-row"> <label for="gapWidth">gapWidth</label> <input id="gapWidth" type="number" step="0.1" min="0" max="5"/> </div> <div class="option-row"> <label for="overlap">overlap</label> <input id="overlap" type="number" step="0.1" min="-1" max="1"/> </div> <div class="option-row"> <input type="button" id="apply" value="Set" /> </div> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .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; } .option-row { padding-bottom: 5px; } label { display:inline-block; } input{ padding: 1px 8px; box-sizing: border-box; width: 100%; } select{ width: 100%; } input[type=checkbox] { display: inline-block; width: auto; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }