var _vertical_column = { example : [{ name: "예제1", description: "예제1 설명", sample: { "type": "vertical_column_type1", "processing": false, "id": "test.trendbar_chart", "visible": true, "options": { "title": "언급량 바 차트 테스트", "xlsx": true, "category": "category", "bar_value": "column-1", "line_value": "column-2", "bar_axis_min": 0, "line_axis_min":0, "bar_axis_max": 100, "line_axis_max":100, "bar_axis_name": '언급량', "line_axis_name": '증감률(전기대비)', "category_axis_right": false, "line_color": "#AAEEFF", "bar_color": "#AAAAAA" }, "data": [ { "category": "가족여행", "column-1": "100", "column-2": "80" }, { "category": "불꽃여행", "column-1": "90", "column-2": "90" }, { "category": "힐링여행", "column-1": "80", "column-2": "90" }, { "category": "벚꽃여행", "column-1": "70", "column-2": "80" }, { "category": "기차여행", "column-1": "60", "column-2": "60" }, { "category": "수목원여행", "column-1": "50", "column-2": "50" }, { "category": "체험여행", "column-1": "40", "column-2": "60" }, { "category": "역사여행", "column-1": "30", "column-2": "70" }, { "category": "수학여행", "column-1": "20", "column-2": "80" }, { "category": "연인과여행", "column-1": "10", "column-2": "90" } ] } }], render : function($dom, unit, with_chart_area = true) { if (with_chart_area) { var $chartDiv = $("
"); var height = unit.data.length * 30 + 150; $chartDiv.css("height", height); $dom.append($chartDiv); } else { var $chartDiv = $dom; if (unit.options.height){ $chartDiv.css("height", unit.options.height); } } var chartDivId = ReportRenderer.getUniqueDivId(); var $innerDiv = $("
"); $innerDiv.attr("id", chartDivId); $innerDiv.attr("class", "chart"); $chartDiv.append($innerDiv); var chartOption = _vertical_column.makeChartOption(unit, {}); AmCharts.makeChart(chartDivId, chartOption); return $chartDiv; }, validateData : function(unit) { RenderUtil.settingOptionsWithDefaultOptions(unit, _vertical_column.DEFAULT_OPTIONS); if (false == RenderUtil.checkChartData(unit, _vertical_column.DATA_FIELD)) { console.error("차트 생성에 필요한 데이터가 존재하지 않습니다 (데이터 필드: " + unit.options[_vertical_column.DATA_FIELD] + ")"); return false; } return true; }, makeChartOption : function(unit, chartData) { var unitOptions = unit.options; var unitData = unit.data; var title = unitOptions['title']; var categoryField = unitOptions["category"]; var barValueField = unitOptions["bar_value"]; var lineValueField = unitOptions["line_value"]; var barAxisName = unitOptions['bar_axis_name']; var lineAxisName = unitOptions['line_axis_name']; var categoryAxisRight = unitOptions['category_axis_right']; var lineColor = unitOptions["line_color"]; var barColor = unitOptions["bar_color"]; var barAxisMin = unitOptions['bar_axis_min']; var barAxisMax = unitOptions['bar_axis_max']; var lineAxisMin = unitOptions['line_axis_min']; var lineAxisMax = unitOptions['line_axis_max']; var marginRight = unitOptions['margin_right']; var marginLeft = unitOptions['margin_left']; var reversed = unitOptions['reversed'] ? true : false; var colorField = unitOptions['color_field']; console.log(colorField) var chartOptions = { "type": "serial", "categoryField": categoryField, "rotate": true, "autoMarginOffset": 30, "marginRight": 20, "marginLeft": 20, "fontFamily": "NanumBarunGothic", "fontSize": 12, "handDrawScatter": 1, "theme": "light", "categoryAxis": { "gridPosition": "start", "position": categoryAxisRight ? "right" : "left" }, "trendLines": [], "graphs": [ { "balloonText": "[[title]] of [[category]]:[[value]]", "fillAlphas": 1, "id": "AmGraph-1", "title": "graph 1", "type": "column", "valueAxis": "barAxis", "valueField": barValueField, "lineAlpha": 0, "colorField": colorField } ], "guides": [], "valueAxes": [ { "id": "barAxis", "minimum": barAxisMin, "maximum": barAxisMax, "title": barAxisName, //"reversed": categoryAxisRight "reversed": reversed } ], "allLabels": [], "balloon": {}, "dataProvider": unitData }; if(marginLeft != null) { chartOptions["autoMarginOffset"] = 0; chartOptions["marginLeft"] = marginLeft } if(marginRight != null) { chartOptions["autoMarginOffset"] = 0; chartOptions["marginRight"] = marginRight } if(lineValueField) { var lineGraph = { "balloonText": "[[title]] of [[category]]:[[value]] %", "bullet": "round", "id": "AmGraph-2", "labelPosition": "right", "labelText": "[[value]] %", "lineThickness": 2, "title": "graph 2", "valueAxis": "lineAxis", "valueField": lineValueField }; var lineAxes = { "id": "lineAxis", "minimum": lineAxisMin, "maximum": lineAxisMax, "position": "top", "axisColor": "#fdd400", "axisThickness": 2, "color": "#DAB700", "gridColor": "", "title": lineAxisName, "titleColor": "#DAB700", "reversed": categoryAxisRight }; if (lineColor) { lineGraph['lineColor'] = lineColor; lineAxes['axisColor'] = lineColor; lineAxes['color'] = lineColor; } chartOptions['graphs'].push(lineGraph); chartOptions['valueAxes'].push(lineAxes); } if (barColor) { chartOptions["graphs"][0]['fillColors'] = barColor } if (title) { chartOptions["titles"] = [ { "id": "chart_title", "size": 16, "text": title } ] } return chartOptions } }; UnitRendererFactory.add("vertical_column_type1", _vertical_column.render); UnitRendererFactory.addExample("vertical_column_type1", _vertical_column.example);