꺾은선형 차트

워크시트의 열 또는 행에 정렬된 데이터는 꺾은선형 차트에 그려질 수 있습니다. 꺾은선형 차트에서 범주 데이터는 가로 축을 따라 균등하게 분포되고 모든 값 데이터는 세로 축을 따라 균등하게 분포됩니다. 꺾은선형 차트는 균등하게 축적된 축에서 시간에 따른 연속적인 데이터를 표시할 수 있으므로 월, 분기 또는 회계 연도와 같은 동일한 간격으로 데이터의 추세를 표시하는 데 이상적입니다.

는 꺾은선형, 누적 꺾은선형, 100% 기준 누적 꺾은선형, 표식이 있는 꺾은선형, 표식이 있는 누적 꺾은선형, 표식이 있는 100% 누적 꺾은선형 차트를 지원합니다. GC.Spread.Sheets.Charts.ChartType.line 속성을 사용하여 차트 유형을 가져옵니다. Spread에 꺾은선형 차트를 추가하고 차트 API를 사용하여 스타일을 변경할 수 있습니다: 꺾은선형 차트는 표식이 있거나 없는 일반 누적 또는 100% 기준 누적이 될 수 있습니다. 표식이 있는 계열에서 표식의 색, 셰이프, 테두리를 사용자 정의할 수 있습니다. 꺾은선형 및 표식이 있는 꺾은선형: 꺾은선형 차트는 개별 데이터 값을 나타내기 위해 표식이 있거나 없는 상태로 나타날 수 있습니다. 꺾은선형 차트는 시간에 따라 또는 간격이 일정한 범주에 따라 추세를 보여줄 때 유용합니다. 특히 많은 데이터 요소가 있고 제시된 순서가 중요할 때 유용합니다. 범주가 많거나 값이 근사치라면 표식이 없는 꺾은선형 차트를 사용하는 것이 가장 좋습니다. 누적 꺾은선형 및 표식이 있는 누적 꺾은선형: 누적 꺾은선형 차트는 시간에 따라 또는 간격이 일정한 범주에 따라 각 값의 기여도 추세를 보여줍니다. 100% 기준 누적 꺾은선형 및 100% 기준 표식이 있는 누적 꺾은선형: 100% 기준 누적 꺾은선형 차트는 시간에 따라 또는 간격이 일정한 범주에 따라 각 값의 기여도 추세를 보여줍니다. 범주가 많거나 값이 근사치인 경우 표식이 없는 100% 기준 누적 꺾은선형 차트를 사용하십시오.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 6}); initSpread(spread); }; function initSpread(spread) { var chartType = [{ type: GC.Spread.Sheets.Charts.ChartType.line, desc: "line", }, { type: GC.Spread.Sheets.Charts.ChartType.lineStacked, desc: "lineStacked", }, { type: GC.Spread.Sheets.Charts.ChartType.lineStacked100, desc: "lineStacked100", }, { type: GC.Spread.Sheets.Charts.ChartType.lineMarkers, desc: "lineMarkers", withMarker: true, }, { type: GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked, desc: "lineMarkersStacked", withMarker: true, }, { type: GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked100, desc: "lineMarkersStacked100", withMarker: true, }]; spread.suspendPaint(); var sheets = spread.sheets; for (var i = 0; i < chartType.length; i++) { var sheet = sheets[i]; initSheet(sheet, chartType[i].desc); initChart(sheet, chartType[i].type, chartType[i].withMarker);//add chart } spread.options.tabStripRatio = 0.8; spread.resumePaint(); } function initSheet(sheet, sheetName) { sheet.name(sheetName); //prepare data for chart var dataArray = [ ["", '2012', '2013', '2014', '2015', '2016', '2017'], ["Chrome", 0.3782, 0.4663, 0.4966, 0.5689, 0.6230, 0.6360], ["FireFox", 0.2284, 0.2030, 0.1801, 0.1560, 0.1531, 0.1304], ["IE", 0.3214, 0.2491, 0.2455, 0.1652, 0.1073, 0.0834], ]; sheet.setArray(0, 0, dataArray); } function initChart(sheet, chartType, marker) { //add chart var chart = sheet.charts.add((sheet.name() + 'Chart1'), chartType, 30, 85, 800, 350, "A1:H4", GC.Spread.Sheets.Charts.RowCol.rows); changeChartLegend(chart); changeChartArea(chart); changChartDataLabels(chart); changeGridLines(chart); changeLineStyle(chart); changeChartAxes(chart); changeChartTitle(chart); if (marker) { changeMarker(chart); } } function changeChartTitle(chart) { var title = chart.title(); title.text = "Browser Market Share"; title.fontSize = 18; chart.title(title); } //change legend position function changeChartLegend(chart) { var legend = chart.legend(); legend.visible = true; var legendPosition = GC.Spread.Sheets.Charts.LegendPosition; legend.position = legendPosition.bottom; chart.legend(legend); } //change backColor function changeChartArea(chart) { var chartArea = chart.chartArea(); chartArea.fontSize = 14; chart.chartArea(chartArea); } // show dataLabels function changChartDataLabels(chart) { var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.showSeriesName = false; dataLabels.showCategoryName = false; dataLabels.format = "0%"; var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition; dataLabels.position = dataLabelPosition.above; chart.dataLabels(dataLabels); } // hide gridLines function changeGridLines(chart) { var gridLinesAxes = chart.axes(); gridLinesAxes.primaryValue.min = null; chart.axes(gridLinesAxes); } //change legend position function changeChartAxes(chart) { chart.axes({primaryValue:{format:"0%"}}); } // change line style function changeLineStyle(chart) { var series = chart.series().get(); var seriesItem; for (var i = 0; i < series.length; i++) { seriesItem = series[i]; seriesItem.border.width = 2; chart.series().set(i, seriesItem); } } // change Marker function changeMarker(chart) { var preSet = [ { fill: "", shape: 0 /** circle */, size: 7, border: { color: "blue", width: 1 } }, { fill: "", shape: 8/** star */, size: 9, border: { color: "black", width: 1 } }, { fill: "yellow", shape: 2 /** diamond */, size: 7, border: { color: "red", width: 2 } }, ]; var series = chart.series().get(); var seriesItem; for (var i = 0; i < series.length; i++) { seriesItem = series[i]; seriesItem.symbol = preSet[i]; chart.series().set(i, seriesItem); } }
<!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/@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 id="ss" class="sample-tutorial"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }