/*
* 전체 데이터 형식
[
{ 개별데이터1 },
{ 개별데이터2 },
...
]
* 개별 데이터 형식
{
"데이터 이름 필드명": "데이터 이름",
"data": [
{
"속성 필드명": "속성 이름1",
"값 필드명": "값1"
}
{
"속성 필드명": "속성 이름2",
"값 필드명": "값2"
},
...
]
}
* options 형식
{
"title": "차트 제목",
"name": "데이터 이름 필드명", // 범례에 표시될 이름
"attr": "속성 필드명", // spider의 각 축에 표시될 필드 이름
"value": "값 필드명" // spider에 값으로 표시될 필드 이름
}
*/
var _spiderchart = {
example: [
{
name: "예제1",
description: "감성 연관어 변화",
sample: {
"visible": true,
"options": {
"title": "도시의 분류별 빈도수 비교",
"xlsx": true,
"name": "keyword",
"attr": "category",
"value": "count"
},
"type": "spiderchart",
"id": "trend_2_1.chart",
"data": [
{
"keyword": "서울",
"data": [
{
"category": "인물",
"count": 123
},
{
"category": "문화",
"count": 105
},
{
"category": "건물명",
"count": 73
},
{
"category": "외부활동",
"count": 39
},
{
"category": "감성",
"count": 12
}
]
},
{
"keyword": "부산",
"data": [
{
"category": "인물",
"count": 162
},
{
"category": "문화",
"count": 78
},
{
"category": "건물명",
"count": 205
},
{
"category": "외부활동",
"count": 91
},
{
"category": "감성",
"count": 132
}
]
}
]
}
}
],
defaultOption : {
"title": null,
"xlsx": true,
"name": "name", // 범례에 표시될 이름
"attr": "attr", // spider의 각 축에 표시될 필드 이름
"value": "value", // spider에 값으로 표시될 필드 이름
"precision": 0,
"percent_precision": 2,
"colors": RenderUtil.color_table_light,
"color_table_name": null,
"height": 0 // 강제 조정 안 함
},
/*
* 에러를 검사하고, 일부 잘못된 형식을 교정
* 에러가 발생하면 console.error로 에러메시지와 unit.id 출력
* 어떻게든 복구가 가능하면 복구하고 true return, 복구 불가능하면 false return
*/
validateData : function(unit) {
var options = unit.options;
if (options == null || Object.keys(options).length == 0) {
console.error("options is empty : " + unit.id);
//return false;
// 옵션이 없는 경우 default 옵션을 넣도록 함
options = unit.options = _bubbles.defaultOption;
}
if (unit.data == null || Object.keys(unit.data).length == 0) {
console.error("data is empty : " + unit.id);
return false;
}
// 누락된 option을 default 값으로 대체
Object.keys(_spiderchart.defaultOption).forEach(function(name) {
if (!options.hasOwnProperty(name)) {
//console.error("unit.options." + name + " does not exist : " + unit.id);
unit.options[name] = _spiderchart.defaultOption[name];
}
});
if (options.color_table_name && RenderUtil.hasOwnProperty(options.color_table_name))
unit.options.colors = RenderUtil[options.color_table_name];
return true;
},
makeChartData : function(unit) {
var options = unit.options;
var nameArray = [];
var attributeArray = []; // 순서를 보존하기 위해
var nameField = options.name;
var attributeField = options.attr;
var valueField = options.value;
var map = {};
unit.data.forEach(function(e) {
var name = e[nameField];
nameArray.push(name);
var dataArray = e.data;
dataArray.forEach(function(data) {
var attribute = data[attributeField];
var mergedData = map[attribute];
if (mergedData == null) {
mergedData = {};
mergedData[attributeField] = attribute;
map[attribute] = mergedData;
attributeArray.push(attribute);
}
mergedData[name] = data[valueField];
});
});
var resultArray = [];
attributeArray.forEach(function(attribute) {
var mergedObject = map[attribute];
resultArray.push(mergedObject);
});
var chartData = {
names : nameArray,
attributes : attributeArray,
data : resultArray
}
return chartData;
},
render : function($dom, unit) {
if (_spiderchart.validateData(unit) == false) {
$dom.append("spiderchart 데이터가 올바르지 않습니다.
" + 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 chartDivId = ReportRenderer.getUniqueDivId(); var $innerDiv = $(""); if (unit.options.height) $innerDiv.css({"height": unit.options.height - 30, "min-height": unit.options.height - 30}); $chartDiv.append($innerDiv); var chartData = _spiderchart.makeChartData(unit); var graphs = []; chartData.names.forEach(function(name) { graphs.push({ "balloonText": "[[category]]: [[value]]", "bullet": "round", "title": name, "valueField": name }); }); var chart = AmCharts.makeChart(chartDivId, { "type": "radar", "colors": unit.options.colors, "categoryField": unit.options.attr, "fontFamily": "NanumBarunGothic", "fontSize": 12, "percentPrecision": unit.options.percent_precision, "precision": unit.options.precision, "graphs": graphs, "guides": [], "valueAxes": [ { "axisTitleOffset": 20, "id": "ValueAxis-1", "minimum": 0, "axisAlpha": 0.15, "dashLength": 3 } ], "allLabels": [], "balloon": {}, "legend": { "enabled": true, "align": "center", "bottom": -2, "position": "right" }, "titles": [ { "size": 16, "text": unit.options.title } ], "dataProvider": chartData.data }); return $chartDiv; } }; UnitRendererFactory.add("spiderchart", _spiderchart.render); UnitRendererFactory.addExample("spiderchart", _spiderchart.example);