오차 막대

오차 막대를 사용하여 차트에서 오차 여백 및 표준 편차를 빠르게 표시할 수 있습니다.

차트를 사용하여 데이터를 표시하는 경우 각 지점의 오차 여백을 표시하는 것이 유용할 수 있습니다. 과학 실험의 결과에 양수 또는 음수 오차량을 표시하면 결과의 가변성을 한눈에 볼 수 있습니다. 오차 유형(오차량)은 다음과 같이 설정할 수 있습니다. * 고정값은 고정값이 포함된 오차 막대를 설정합니다. * 백분율은 동일 방향 축에 데이터 값의 백분율이 포함된 오차 막대를 설정합니다. * 표준 편차는 설정된 편차 및 차트 데이터 값에 따라 결정되는 계산 값이 포함된 오차 막대를 설정합니다. * 표준 오차는 차트 데이터 값에 따라서만 결정되는 계산 값이 포함된 오차 막대를 설정합니다. * 사용자 정의는 수식 또는 고정된 수로 나타내는 양수 및 음수 값이 포함된 오차 막대를 설정합니다. 이 기능은 다음 차트 유형을 지원합니다. * 세로 막대형 * 꺾은선형 * 막대형 * 영역형 * 분산형 * 거품형 사용자 정의 type: 음수 오차 막대 및 양수 오차 막대의 표시 여부를 지정합니다. noEndCap: 오차 막대 캡의 표시 여부를 지정합니다. style: 색, 너비 및 파선을 포함한 오차 막대의 선 스타일을 지정합니다. 다음 코드를 사용하여 오차 막대를 사용자 정의할 수 있습니다.
var COLORS = { deepBlue: '#3e619f', blue: '#a1b8e1', deepOrange: '#c55a11', orange: '#f6be98', white: '#ffffff' }; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 3 }); addBasicChart(spread.getSheet(0)); addStepChart(spread.getSheet(1)); addGanttChart(spread.getSheet(2)); }; function addBasicChart(sheet) { sheet.name("BaseUsage"); var salesData = [ ['', 'Sales'], ['Jan', 54], ['Feb', 60], ['Mar', 86], ['Apr', 92], ['May', 112], ['Jun', 157], ['Jul', 202], ['Aug', 195], ['Sep', 187], ['Oct', 194], ['Nov', 238], ['Dec', 289], ]; sheet.setArray(0, 0, salesData); var chart1 = sheet.charts.add("chart1", GC.Spread.Sheets.Charts.ChartType.xyScatterSmooth, 140, 5, 500, 350, "A1:B13", GC.Spread.Sheets.Charts.RowCol.columns); var series = chart1.series().get(0); series.errorBars = { vertical: { type: GC.Spread.Sheets.Charts.ErrorBarType.both, valueType: GC.Spread.Sheets.Charts.ErrorBarValueType.standardError, style: { color: COLORS.deepOrange } } }; chart1.series().set(0, series); } function addStepChart(sheet) { sheet.name("StepChart"); var priceData = [ ['', 'Price Changes', 'x-error', 'y-error-negative', 'y-error-positive'], [new Date('5/7/2019'), 39], [new Date('5/27/2019'), 47], [new Date('6/15/2019'), 30], [new Date('6/24/2019'), 46], [new Date('8/3/2019'), 37], [new Date('8/28/2019'), 50], [new Date('9/29/2019'), 43], [new Date('10/30/2019'), 48], ]; sheet.setArray(0, 0, priceData); sheet.setFormula(1, 2, "=IF(A3, A3-A2, 20)"); sheet.setFormula(1, 3, "=IFERROR(IF(B1-B2>0, B1-B2, 0), 0)"); sheet.setFormula(1, 4, "=IFERROR(IF(B2-B1>0, B2-B1, 0), 0)"); sheet.fillAuto(new GC.Spread.Sheets.Range(1, 2, 1, 3), new GC.Spread.Sheets.Range(1, 2, 8, 3), { direction: GC.Spread.Sheets.Fill.FillDirection.down, fillType: GC.Spread.Sheets.Fill.FillType.auto }); sheet.getRange(1, 1, 8, 1).formatter('_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)'); sheet.setColumnWidth(0, 100); sheet.setColumnWidth(1, 100); var chart = sheet.charts.add("StepChart", GC.Spread.Sheets.Charts.ChartType.xyScatter, 200, 5, 800, 450, "A1:B9", GC.Spread.Sheets.Charts.RowCol.columns); var axes = chart.axes(); axes.primaryCategory.format = 'm/d/yyyy'; axes.primaryCategory.majorTickPosition = GC.Spread.Sheets.Charts.TickMark.outside; chart.axes(axes); chart.legend({ visible: false }); var series = chart.series().get(0); series.symbol = { fill: null, border: { color: null } }; // Hide the symbol. series.errorBars = { horizontal: { type: GC.Spread.Sheets.Charts.ErrorBarType.plus, valueType: GC.Spread.Sheets.Charts.ErrorBarValueType.custom, noEndCap: true, custom: { positive: '=StepChart!$C$2:$C$9' } }, vertical: { valueType: GC.Spread.Sheets.Charts.ErrorBarValueType.custom, noEndCap: true, custom: { positive: '=StepChart!$D$2:$D$9', negative: '=StepChart!$E$2:$E$9' }, style: { color: "gray", dashStyle: GC.Spread.Sheets.Charts.LineDashStyle.dash } } }; chart.series().set(0, series); var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.position = GC.Spread.Sheets.Charts.DataLabelPosition.above; dataLabels.format = '$* #,##0.00'; dataLabels.color = "red"; chart.dataLabels(dataLabels); } function addGanttChart(sheet) { sheet.name("GanttChart"); var ganttData = [ ['End Date', 'Height'], [new Date('4/15/2019'), 0.9375], [new Date('4/29/2019'), 0.8125], [new Date('5/6/2019'), 0.6875], [new Date('5/20/2019'), 0.5625], [new Date('5/27/2019'), 0.4375], [new Date('6/17/2019'), 0.3125], [new Date('6/24/2019'), 0.1875], [new Date('7/1/2019'), 0.0625] ]; sheet.setArray(0, 0, ganttData); sheet.setColumnWidth(0, 100); var SIZE = 12; var ZFACTOR = 25; var chart = sheet.charts.add("GanttChart", GC.Spread.Sheets.Charts.ChartType.xyScatter, 180, 5, 500, 350, "A1:B9", GC.Spread.Sheets.Charts.RowCol.columns); chart.title({ text: 'Project Progress' }); var axes = chart.axes(); axes.primaryCategory.format = 'm/d/yyyy'; axes.primaryCategory.majorTickPosition = GC.Spread.Sheets.Charts.TickMark.outside; axes.primaryValue.visible = false; chart.axes(axes); chart.legend({ visible: false }); var backgroundSeriesIndex = 0; var backgroundSeries = chart.series().get(backgroundSeriesIndex); var backgroundErrorBar = { type: GC.Spread.Sheets.Charts.ErrorBarType.minus, valueType: GC.Spread.Sheets.Charts.ErrorBarValueType.custom, noEndCap: true, custom: { negative: '={' + ZFACTOR + '}' }, style: { color: COLORS.blue, width: SIZE } }; backgroundSeries.errorBars = { horizontal: backgroundErrorBar }; backgroundSeries.symbol = { shape: GC.Spread.Sheets.Charts.SymbolShape.diamond, size: SIZE, fill: COLORS.deepBlue }; chart.series().set(backgroundSeriesIndex, backgroundSeries); var unfinishedSeries = { chartType: GC.Spread.Sheets.Charts.ChartType.xyScatter, axisGroup: GC.Spread.Sheets.Charts.AxisGroup.primary, xValues: 'GanttChart!$A$2:$A$9', yValues: 'GanttChart!$B$2:$B$9', symbol: { shape: GC.Spread.Sheets.Charts.SymbolShape.diamond, size: SIZE - 4, fill: COLORS.deepOrange }, errorBars: { horizontal: { type: GC.Spread.Sheets.Charts.ErrorBarType.minus, valueType: GC.Spread.Sheets.Charts.ErrorBarValueType.custom, noEndCap: true, custom: { negative: '={' + createErrorBarValue(ganttData.slice(1), ZFACTOR).toString() + '}' }, style: { color: COLORS.orange, width: SIZE } } } }; chart.series().add(unfinishedSeries); var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.position = GC.Spread.Sheets.Charts.DataLabelPosition.below; dataLabels.format = '#,##0%'; dataLabels.color = COLORS.orange; chart.dataLabels(dataLabels); } function createErrorBarValue(dataSource, z) { var values = []; for (var i = 0; i < dataSource.length; i++) { values.push(dataSource[i][1] * z); } return values; }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ko-kr"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/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> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100% ; height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }