안녕하세요, 초보개발자입니다.
자바스크립트 여쭤볼것이 있는데요,
GitHub에 있는 cBoard란 BI대쉬보드 오픈소스를 받아서 공부하고 있습니다.
제가 지금까지 알고있었던 자바스크립트의 함수표현식은, 예를들면, 아래와 같은 형식이었습니다만,
var parseOption = function (data) {
return echartOption;
}
아래 소스코드는 chartLineService.js란 파일의 첫줄인데요, 해석이 잘 안되서요. 도움을 요청합니다.
cBoard.service('chartLineService', function ($state, $window)
위 소스코드 부분만 해석을 부탁드려도 될까요?
제가 이해한 것은
cBoard.service에 'chartLineService'를 주입한다.
chartLineService는 $state와 $window를 매개변수로 받는다.
정도입니다만, 사실 너무 헷갈립니다.
cBoard.service는 객체일까요? 함수일까요?
state와 window앞에 $표시는 무슨역할이죠? 제이쿼리는 아닌것같습니다만,
(본 소스코드 view(html)부분은 angular js가 사용되고 있습니다)
만약을 위해 전체 소스를 아래에 붙이겠습니다.
참고. chartLineService.js 전체 소스
cBoard.service('chartLineService', function ($state, $window) { this.render = function (containerDom, option, scope, persist, drill, relations, chartConfig) { var render = new CBoardEChartRender(containerDom, option); render.addClick(chartConfig, relations, $state, $window); return render.chart(null, persist); }; this.parseOption = function (data) { var chartConfig = data.chartConfig; var casted_keys = data.keys; var casted_values = data.series; var aggregate_data = data.data; var newValuesConfig = data.seriesConfig; var series_data = new Array(); var string_keys = _.map(casted_keys, function (key) { return key.join('-'); }); var tunningOpt = chartConfig.option; var sum_data = []; for (var j = 0; aggregate_data[0] && j < aggregate_data[0].length; j++) { var sum = 0; for (var i = 0; i < aggregate_data.length; i++) { sum += aggregate_data[i][j] ? Number(aggregate_data[i][j]) : 0; // change undefined to 0 aggregate_data[i][j] = aggregate_data[i][j] ? Number(aggregate_data[i][j]) : 0; } sum_data[j] = sum; } var line_type; for (var i = 0; i < aggregate_data.length; i++) { var joined_values = casted_values[i].join('-'); var s = angular.copy(newValuesConfig[joined_values]); s.name = joined_values; s.data = aggregate_data[i]; s.barMaxWidth = 40; line_type = s.type; if (s.type == 'stackbar') { s.type = 'bar'; s.stack = s.valueAxisIndex.toString(); } else if (s.type == 'polarbar') { s.type = 'bar'; s.stack = s.valueAxisIndex.toString(); s.coordinateSystem = 'polar'; } else if (s.type == 'percentbar') { if (chartConfig.valueAxis == 'horizontal') { s.data = _.map(aggregate_data[i], function (e, i) { return (e / sum_data[i] * 100).toFixed(2); }) } else { s.data = _.map(aggregate_data[i], function (e, i) { return [i, (e / sum_data[i] * 100).toFixed(2), e]; }); } s.type = 'bar'; s.stack = s.valueAxisIndex.toString(); } else if (s.type == "arealine") { s.type = "line"; s.areaStyle = {normal: {}}; } else if (s.type == "stackline") { s.type = "line"; s.stack = s.valueAxisIndex.toString(); s.areaStyle = {normal: {}}; } else if (s.type == 'percentline') { if (chartConfig.valueAxis == 'horizontal') { s.data = _.map(aggregate_data[i], function (e, i) { return (e / sum_data[i] * 100).toFixed(2); }) } else { s.data = _.map(aggregate_data[i], function (e, i) { return [i, (e / sum_data[i] * 100).toFixed(2), e]; }); } s.type = "line"; s.stack = s.valueAxisIndex.toString(); s.areaStyle = {normal: {}}; } if (chartConfig.valueAxis == 'horizontal') { s.xAxisIndex = s.valueAxisIndex; } else { s.yAxisIndex = s.valueAxisIndex; } series_data.push(s); } var valueAxis = angular.copy(chartConfig.values); _.each(valueAxis, function (axis, index) { axis.axisLabel = { formatter: function (value) { return numbro(value).format("0a.[0000]"); } }; if (axis.series_type == "percentbar" || axis.series_type == "percentline") { axis.min = 0; axis.max = 100; } else { axis.min = axis.min ? axis.min : null; axis.max = axis.max ? axis.max : null; } if (index > 0) { axis.splitLine = false; } axis.scale = true; }); if (tunningOpt) { var labelInterval, labelRotate; tunningOpt.ctgLabelInterval ? labelInterval = tunningOpt.ctgLabelInterval : 'auto'; tunningOpt.ctgLabelRotate ? labelRotate = tunningOpt.ctgLabelRotate : 0; } var categoryAxis = { type: 'category', data: string_keys, axisLabel: { interval: labelInterval, rotate: labelRotate }, boundaryGap: false }; _.each(valueAxis, function (axis) { var _stype = axis.series_type; if (_stype.indexOf('bar') !== -1) { categoryAxis.boundaryGap = true; } }); var echartOption = { grid: angular.copy(echartsBasicOption.grid), legend: { data: _.map(casted_values, function (v) { return v.join('-'); }) }, tooltip: { formatter: function (params) { var name = params[0].name; var s = name + "</br>"; for (var i = 0; i < params.length; i++) { s += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params[i].color + '"></span>'; if (params[i].value instanceof Array) { s += params[i].seriesName + " : " + params[i].value[1] + "% (" + params[i].value[2] + ")<br>"; } else { s += params[i].seriesName + " : " + params[i].value + "<br>"; } } return s; }, axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, series: series_data }; if (line_type == 'polarbar') { echartOption.angleAxis = chartConfig.valueAxis == 'horizontal' ? valueAxis : categoryAxis; echartOption.radiusAxis = chartConfig.valueAxis == 'horizontal' ? categoryAxis : valueAxis; echartOption.polar = {}; } else { echartOption.xAxis = chartConfig.valueAxis == 'horizontal' ? valueAxis : categoryAxis; echartOption.yAxis = chartConfig.valueAxis == 'horizontal' ? categoryAxis : valueAxis; } if (chartConfig.valueAxis === 'horizontal') { echartOption.grid.left = 'left'; echartOption.grid.containLabel = true; echartOption.grid.bottom = '5%'; } if (chartConfig.valueAxis === 'vertical' && chartConfig.values.length > 1) { echartOption.grid.right = 40; } // Apply tunning options updateEchartOptions(tunningOpt, echartOption); return echartOption; }; });