/* title: 차트제목" : "언급량 차트", category_field: category(y)축 라벨 필드 bar_value_field: bar 차트 값 필드 line_value_field: line 차트 값 필드 line_text_field": line 각 값위에 표시할 텍스트 값 필드 bar_axis_name: bar 차트 x축 표시 문구 line_axis_name: line 차트 x축 표시 문고 line_color: line 차트 line color bar_color_field: bar chart 값 category 필드(범례용 타이틀) color_table": barchart category color 테이블 */ var _barline2 = { example : [ { name: "예제1", description: "분류형 아이템", sample: { "type": "barline2", "processing": false, "id": "test.barline2", "visible": true, "options" : { "title" : "언급량 차트", "xlsx": true, "category_field" : "category", "bar_value_field": "frequency", "line_value_field" : "ratio", "line_text_field": "text_label", "bar_axis_name": "언급량", "line_axis_name": "증감률 (%)", "line_color": "#FF6A32", "bar_color_field": "color_category" }, "data": [ {"category": "전주한옥마을", "text_label": "-2.0", "frequency": 24164, "ratio": -2.0153278455861425, "color_category": "자연경관"}, {"category": "전동성당", "text_label": "-16.2", "frequency": 11089, "ratio": -16.22724182216514, "color_category": "역사/유적"}, {"category": "경기전", "text_label": "-2.3", "frequency": 4865, "ratio": -2.309236947791163, "color_category": "역사/유적"}, {"category": "오목대", "text_label": "-5.7", "frequency": 1973, "ratio": -5.68833652007649, "color_category": "역사/유적"}, {"category": "자만벽화마을", "text_label": "-22.8", "frequency": 1260, "ratio": -22.8413962033068, "color_category": "자연경관"}, {"category": "완산공원", "text_label": "NEW", "frequency": 1246, "ratio": 295.08928571428567, "color_category": "자연경관"}, {"category": "덕진공원", "text_label": "147.5", "frequency": 1109, "ratio": 147.54464285714283, "color_category": "자연경관"}, {"category": "풍남문", "text_label": "-35.2", "frequency": 867, "ratio": -35.20179372197309, "color_category": "역사/유적"}, {"category": "전주향교", "text_label": "4.1", "frequency": 743, "ratio": 4.061624649859951, "color_category": "역사/유적"}, {"category": "전주남부시장", "text_label": "39.4", "frequency": 704, "ratio": 39.40594059405939, "color_category": "쇼핑"}, {"category": "한국소리문화의전당", "text_label": "92.6", "frequency": 391, "ratio": 92.61083743842363, "color_category": "문화"}, {"category": "모악산", "text_label": "51.1", "frequency": 281, "ratio": 51.07526881720429, "color_category": "자연경관"}, {"category": "한국전통문화전당", "text_label": "71.8", "frequency": 225, "ratio": 71.75572519083971, "color_category": "문화"}, {"category": "국립전주박물관", "text_label": "-22.1", "frequency": 60, "ratio": -22.077922077922068, "color_category": "문화"}, {"category": "최명희문학관", "text_label": "-17.1", "frequency": 34, "ratio": -17.07317073170732, "color_category": "문화"} ] } }, { name: "예제2", description: "시계열 아이템: x축에 빌부 항목의 레이블만 표시", sample: { "type": "barline2", "processing": false, "id": "test.barline2", "visible": true, "options" : { "title" : "언급량 차트", "xlsx": true, "category_field" : "date", "bar_value_field": "score", "line_value_field" : "ratio", "line_text_field": "label", "bar_axis_name": "언급량", "line_axis_name": "증감률 (%)", "line_color": "#FF6A32", "show_x_label": "auto", "x_rotate": 0, "bar_color_field": null, "legend": false }, "data": [ {"date": "2010-01-01", "score": 8370, "ratio": 1.94884287454324, "label": "1.9"}, {"date": "2010-02-01", "score": 8270, "ratio": -1.1947431302270013, "label": "-1.2"}, {"date": "2010-03-01", "score": 8250, "ratio": -0.2418379685610641, "label": "-0.2"}, {"date": "2010-04-01", "score": 8190, "ratio": -0.7272727272727273, "label": "-0.7"}, {"date": "2010-05-01", "score": 8310, "ratio": 1.465201465201465, "label": "1.5"}, {"date": "2010-06-01", "score": 8150, "ratio": -1.9253910950661852, "label": "-1.9"}, {"date": "2010-07-01", "score": 8200, "ratio": 0.6134969325153374, "label": "0.6"}, {"date": "2010-08-01", "score": 8340, "ratio": 1.7073170731707317, "label": "1.7"}, {"date": "2010-09-01", "score": 8270, "ratio": -0.8393285371702638, "label": "-0.8"}, {"date": "2010-10-01", "score": 8270, "ratio": 0.0, "label": "0.0"}, {"date": "2010-11-01", "score": 8100, "ratio": -2.0556227327690446, "label": "-2.1"}, {"date": "2010-12-01", "score": 8190, "ratio": 1.1111111111111112, "label": "1.1"}, {"date": "2011-01-01", "score": 8230, "ratio": 0.4884004884004884, "label": "0.5"}, {"date": "2011-02-01", "score": 8210, "ratio": -0.24301336573511542, "label": "-0.2"}, {"date": "2011-03-01", "score": 8260, "ratio": 0.6090133982947625, "label": "0.6"}, {"date": "2011-04-01", "score": 8190, "ratio": -0.847457627118644, "label": "-0.8"}, {"date": "2011-05-01", "score": 8110, "ratio": -0.9768009768009768, "label": "-1.0"}, {"date": "2011-06-01", "score": 8040, "ratio": -0.8631319358816276, "label": "-0.9"}, {"date": "2011-07-01", "score": 8010, "ratio": -0.373134328358209, "label": "-0.4"}, {"date": "2011-08-01", "score": 7760, "ratio": -3.1210986267166043, "label": "-3.1"}, {"date": "2011-09-01", "score": 7810, "ratio": 0.6443298969072165, "label": "0.6"}, {"date": "2011-10-01", "score": 7580, "ratio": -2.9449423815621, "label": "-2.9"}, {"date": "2011-11-01", "score": 7600, "ratio": 0.2638522427440633, "label": "0.3"}, {"date": "2011-12-01", "score": 7700, "ratio": 1.3157894736842106, "label": "1.3"}, {"date": "2012-01-01", "score": 7800, "ratio": 1.2987012987012987, "label": "1.3"}, {"date": "2012-02-01", "score": 7860, "ratio": 0.7692307692307693, "label": "0.8"}, {"date": "2012-03-01", "score": 8010, "ratio": 1.9083969465648856, "label": "1.9"}, {"date": "2012-04-01", "score": 8170, "ratio": 1.9975031210986267, "label": "2.0"}, {"date": "2012-05-01", "score": 8050, "ratio": -1.4687882496940023, "label": "-1.5"}, {"date": "2012-06-01", "score": 8130, "ratio": 0.9937888198757764, "label": "1.0"}, {"date": "2012-07-01", "score": 8140, "ratio": 0.12300123001230012, "label": "0.1"}, {"date": "2012-08-01", "score": 8150, "ratio": 0.12285012285012285, "label": "0.1"}, {"date": "2012-09-01", "score": 8150, "ratio": 0.0, "label": "0.0"}, {"date": "2012-10-01", "score": 8000, "ratio": -1.8404907975460123, "label": "-1.8"}, {"date": "2012-11-01", "score": 8140, "ratio": 1.75, "label": "1.8"}, {"date": "2012-12-01", "score": 8310, "ratio": 2.0884520884520885, "label": "2.1"} ] } }, { name: "예제3", description: "시계열 아이템: 일부 항목만 컬러링 및 범례 표시", sample: { "type": "barline2", "processing": false, "id": "test.barline2", "visible": true, "options" : { "title" : "언급량 차트", "xlsx": true, "category_field" : "date", "bar_value_field": "score", "line_value_field" : "ratio", "line_text_field": "label", "bar_axis_name": "언급량", "line_axis_name": "증감률 (%)", "line_color": "#FF6A32", "show_x_label": "auto", "x_rotate": 0, "bar_color_field": "tag", "legend": true }, "data": [ {"date": "2010-01-01", "score": 8370, "ratio": 1.94884287454324, "label": "1.9"}, {"date": "2010-02-01", "score": 8270, "ratio": -1.1947431302270013, "label": "-1.2"}, {"date": "2010-03-01", "score": 8250, "ratio": -0.2418379685610641, "label": "-0.2"}, {"date": "2010-04-01", "score": 8190, "ratio": -0.7272727272727273, "label": "-0.7"}, {"date": "2010-05-01", "score": 8310, "ratio": 1.465201465201465, "label": "1.5"}, {"date": "2010-06-01", "score": 8150, "ratio": -1.9253910950661852, "label": "-1.9"}, {"date": "2010-07-01", "score": 8200, "ratio": 0.6134969325153374, "label": "0.6"}, {"date": "2010-08-01", "score": 8340, "ratio": 1.7073170731707317, "label": "1.7"}, {"date": "2010-09-01", "score": 8270, "ratio": -0.8393285371702638, "label": "-0.8"}, {"date": "2010-10-01", "score": 8270, "ratio": 0.0, "label": "0.0"}, {"date": "2010-11-01", "score": 8100, "ratio": -2.0556227327690446, "label": "-2.1"}, {"date": "2010-12-01", "score": 8190, "ratio": 1.1111111111111112, "label": "1.1"}, {"date": "2011-01-01", "score": 8230, "ratio": 0.4884004884004884, "label": "0.5"}, {"date": "2011-02-01", "score": 8210, "ratio": -0.24301336573511542, "label": "-0.2"}, {"date": "2011-03-01", "score": 8260, "ratio": 0.6090133982947625, "label": "0.6"}, {"date": "2011-04-01", "score": 8190, "ratio": -0.847457627118644, "label": "-0.8"}, {"date": "2011-05-01", "score": 8110, "ratio": -0.9768009768009768, "label": "-1.0"}, {"date": "2011-06-01", "score": 8040, "ratio": -0.8631319358816276, "label": "-0.9"}, {"date": "2011-07-01", "score": 8010, "ratio": -0.373134328358209, "label": "-0.4"}, {"date": "2011-08-01", "score": 7760, "ratio": -3.1210986267166043, "label": "-3.1", "tag": "증감률최저"}, {"date": "2011-09-01", "score": 7810, "ratio": 0.6443298969072165, "label": "0.6"}, {"date": "2011-10-01", "score": 7580, "ratio": -2.9449423815621, "label": "-2.9"}, {"date": "2011-11-01", "score": 7600, "ratio": 0.2638522427440633, "label": "0.3"}, {"date": "2011-12-01", "score": 7700, "ratio": 1.3157894736842106, "label": "1.3"}, {"date": "2012-01-01", "score": 7800, "ratio": 1.2987012987012987, "label": "1.3"}, {"date": "2012-02-01", "score": 7860, "ratio": 0.7692307692307693, "label": "0.8"}, {"date": "2012-03-01", "score": 8010, "ratio": 1.9083969465648856, "label": "1.9"}, {"date": "2012-04-01", "score": 8170, "ratio": 1.9975031210986267, "label": "2.0"}, {"date": "2012-05-01", "score": 8050, "ratio": -1.4687882496940023, "label": "-1.5"}, {"date": "2012-06-01", "score": 8130, "ratio": 0.9937888198757764, "label": "1.0"}, {"date": "2012-07-01", "score": 8140, "ratio": 0.12300123001230012, "label": "0.1"}, {"date": "2012-08-01", "score": 8150, "ratio": 0.12285012285012285, "label": "0.1"}, {"date": "2012-09-01", "score": 8150, "ratio": 0.0, "label": "0.0"}, {"date": "2012-10-01", "score": 8000, "ratio": -1.8404907975460123, "label": "-1.8"}, {"date": "2012-11-01", "score": 8140, "ratio": 1.75, "label": "1.8"}, {"date": "2012-12-01", "score": 8310, "ratio": 2.0884520884520885, "label": "2.1", "tag": "증감률최고"} ] } } ], defaultOption : { "title" : null, "xlsx": true, "category_field" : "category", "bar_value_field": "frequency", "line_value_field" : "ratio", "line_text_field": "text_label", "bar_axis_name": "언급량", "line_axis_name": "증감률 (%)", "line_color": "#FF6A32", "bar_color_field": "color_category", "legend": true, "color_table": {}, "colors": RenderUtil.color_table_light, "color_table_name": null, "show_all": true, "x_rotate": 45, "height": 0, // 강제 조정 안 함 "show_x_label": "all", // "all" - 모두 표시, "auto" - 자동으로 표시, 그 외의 값 - 표시 여부를 나타내는 필드 }, validateData : function(unit) { var options = unit.options; if ((unit.data == null) || (unit.options == null)) { console.error("unit.data or unit.options is null. : " + unit.id); return false; } // 누락된 option을 default 값으로 대체 Object.keys(_barline2.defaultOption).forEach(function(name) { if (!options.hasOwnProperty(name)) { unit.options[name] = _barline2.defaultOption[name]; } }); if (options.color_table_name && RenderUtil.hasOwnProperty(options.color_table_name)) unit.options.colors = RenderUtil[options.color_table_name]; return true; }, render : function($dom, unit) { if (_barline2.validateData(unit) == false) { $dom.append("barline2 데이터가 올바르지 않습니다.
" + JSON.stringify(unit, null, 2) + "
"); return; } var $chartDiv = $("
"); if (unit.options.height) $chartDiv.css({"height": unit.options.height, "min-height": unit.options.height}); $dom.append($chartDiv); var chartOptions = _barline2.makeChartOptions(unit, {}); if (unit.options.legend) $chartDiv.height($chartDiv.height() + Math.floor(chartOptions.legend.data.length / 4) * 30); var chartDivId = ReportRenderer.getUniqueDivId(); var $innerDiv = $("
"); $innerDiv.attr("id", chartDivId); $innerDiv.attr("class", "chart"); if (unit.options.height) $innerDiv.css({"height": unit.options.height - 30, "min-height": unit.options.height - 30}); $chartDiv.append($innerDiv); var chart = AmCharts.makeChart(chartDivId, chartOptions); return $chartDiv; }, makeChartOptions : function(unit, chartData) { var unitOptions = unit.options var barAxis = { "title": unitOptions["bar_axis_name"], "titleBold": false, //"titleFontSize": 9, "showLastLabel": true, "id": "v1", "axisColor": "#000000", "axisThickness": 1, "axisAlpha": 1, "position": "left", "gridThickness": 0 } var lineAxis = { "title": unitOptions["line_axis_name"], "titleBold": false, //"titleFontSize": 9, "id":"v2", "axisColor": unitOptions['line_color'], "axisThickness": 1, "axisAlpha": 1, "position": "right", "gridThickness": 0 } var valueAxis = [barAxis, lineAxis] var barGraph = { "valueAxis": "v1", "balloonText": "[[title]] in [[category]]:
[[value]] [[additional]]
", "fillAlphas": 1, //"title": "언급량", "title": unitOptions["bar_axis_name"], "type": "column", //"fillColor": "#FAF6F5", "fillColorsField": "color", "lineAlpha": 0, "valueField": unitOptions["bar_value_field"], "dashLengthField": "dashLengthColumn" } var lineGraph = { "id": "graph2", "valueAxis": "v2", "balloonText": "[[title]] in [[category]]:
[[value]] [[additional]]
", "bullet": "round", "lineThickness": 2, "bulletSize": 6, "bulletBorderAlpha": 1, "bulletColor": "#FFFFFF", "useLineColorForBulletBorder": true, "bulletBorderThickness": 1, "fillAlphas": 0, "lineAlpha": 1, "lineColor": unitOptions["line_color"], "title": unitOptions["line_axis_name"], "valueField": unitOptions["line_value_field"], "dashLengthField": "dashLengthLine", "labelText": "[[" + unitOptions["line_text_field"] + "]]", "fontSize": 9, "showAllValueLabels": unitOptions["show_all"] // 범위를 벗어나는 경우에도 label을 표시 } var graphs = [barGraph, lineGraph] var cat2color = {}; var cat2title = {}; var next_color_id = 0; var dataProvider = unit.options.bar_color_field ? [] : unit.data; if (unit.options.bar_color_field) { $.each(unit.data, function(i, d) { var dp = $.extend(true, {}, d); var cat = d[unitOptions.bar_color_field]; if (cat in cat2color) dp['color'] = cat2color[cat]; else { if (cat in unitOptions.color_table) dp['color'] = unitOptions.color_table[cat]; else if (typeof(cat) !== "undefined" && cat !== null) { dp['color'] = unitOptions.colors[next_color_id % unitOptions.colors.length]; next_color_id++; } else dp['color'] = '#CCCCCC'; if (typeof(cat) !== "undefined" && cat !== null) cat2color[cat] = dp['color']; } dataProvider.push(dp); }); } legend_data = [] $.each(cat2color, function(category, color) { if (typeof(category) !== "undefined" && category !== null) legend_data.push({"title": category, "color": color}); }); var options = unit.options; var chartOptions = { "type": "serial", "startDuration": 0, "fontFamily": "NanumBarunGothic", "fontSize": 12, "titles": [{ "text": unitOptions["title"], "title": "", "color": "#333333", "size": 16 }], "gridAboveGraphs": false, "addClassNames": true, "theme": "light", "autoMargins": true, "balloon": { "adjustBorderColor": false, "horizontalPadding": 10, "verticalPadding": 8, "color": "#ffffff" }, "categoryField": unitOptions["category_field"], "categoryAxis": { "autoGridCount": false, "gridThickness": 1, "gridAlpha": 0, "labelRotation": unit.options.x_rotate, }, "dataProvider": dataProvider, "valueAxes": valueAxis, "graphs": graphs } if (unit.options.legend && (legend_data.length >= 1)) chartOptions.legend = { "switchable": true, "align": "center", "data": legend_data } if (unit.options.bar_color_field) chartOptions.colorField = "color"; if (unit.options.show_x_label == "all") { chartOptions.categoryAxis.forceShowField = unitOptions["category_field"]; // 모두 표시를 위해 } else if (unit.options.show_x_label == "auto") { chartOptions.categoryAxis.GridCount = 4; // 추후 개수를 옵션화 필요 } else { chartOptions.categoryAxis.forceShowField = unit.options.show_x_label; // 필드명 지정 } return chartOptions }, }; UnitRendererFactory.add("barline2", _barline2.render); UnitRendererFactory.addExample("barline2", _barline2.example);