카테고리 없음
<IT_rmate chart> 알메이트 차트 구현 소스
달남
2019. 12. 4. 14:45
/*
3D 단일 막대 그래프 : makeColumnChart(title, subTitle, color, chartId, divId, categoryField, yField, chartData)
라인 그래프 : makeLineChart(title, subTitle, color, chartId, divId, categoryField, yField, chartData)
파이 그래프 : makePieChart(title, subTitle, color, chartId, divId, categoryField, yField, chartData)
레이더 그래프 : makeRadarChart(title, subTitle, color, chartId, divId, categoryField, yField, displayName, chartData)
3D 멀티 막대 그래프 : makeColumnMultiChart(title, subTitle, color, chartId, divId, categoryField, yField, displayName, chartData)
바 그래프 : makeBarChart(title, subTitle, color, chartId, divId, categoryField, yField, chartData)
라인 멀티 그래프 : makeLineMultiChart(title, subTitle, color, chartId, divId, color, categoryField, yField, displayName, chartData)
3D 막대 + 라인 그래프 : makeCombinationChart(title, subTitle, color, chartId, divId, categoryField, yField, displayName, chartData)
도넛 그래프 : makeDoughnutChart(title, subTitle, color, chartId, divId, categoryField, yField, chartData)
게이지 그래프 : makeGaugeCircularGradientChart(title, subTitle, color, chartId, divId, categoryField, yField, chartData)
맵 차트 : makeMapChart(chartId, chartData)
반복이미지 그래프 : makeImageRepeatChart(title, subTitle, color, chartId, divId, categoryField, yField, chartData)
버블 맵 그래프 : makeBubbleMapChart(chartId, chartData)
패턴막대그래프 : makePatternColumnChart(title, subTitle, color, chartId, divId, categoryField, yField, chartData)
단일이미지 그래프 : makeLineMultiDualChart(title, subTitle, color, chartId, divId, categoryField, yField, displayName, chartData){
라인멀티듀얼축 그래프 : makeLineMultiDualChart(title, subTitle, color, chartId, divId, categoryField, yField, displayName, chartData)
Parameter
title : 차트 제목
subtitle : 차트 부제목
color : 막대 및 라인 컬러
charId : rMateChartH5.create에 대입한 차트아이디
divId : 실제 차트가 구현 될 div 아이디
categoryField : x축 컬럼명(소문자)
yField : y축 컬럼명(소문자)
chartData : DB에서 조회한 데이터
*/
function makeColumnChart(chartId, categoryField, yField, chartData, unit, color){
var yUnit = "";
if( unit == null || unit == "" ){
unit ="";
}else{
yUnit = unit.split(":")[1].split(")")[0].replace(/\s/gi, "");
}
var layoutStr = '<rMateChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="solid">'
+' <Options>'
+' <SubCaption text="'+unit+'" textAlign="right"/>' //단위
+' </Options>'
+' <CurrencyFormatter id="fmt" currencySymbol="('+ yUnit +')" alignSymbol="right"/>'
+' <NumberFormatter id="numFmt" precision="0" useThousandsSeparator="true"/>'
+' <Column2DChart showDataTips="true" >'
+' <horizontalAxis>'
+' <CategoryAxis categoryField="'+ categoryField +'" />'
+' </horizontalAxis>'
+' <verticalAxis>'
+' <LinearAxis id="vAxis" formatter="{fmt}" />'
+' </verticalAxis>'
+' <series>'
+' <Column2DSeries labelPosition="inside" yField="'+ yField +'" styleName="seriesStyle" >'
+' <showDataEffect>'
+' <SeriesInterpolate/>'
+' </showDataEffect>'
+' <fill> '
+' <SolidColor color="'+color+'" alpha="1"/> '
+' </fill> '
+' <stroke> '
+' <Stroke color="'+color+'" weight="1"/> '
+' </stroke> '
+' </Column2DSeries>'
+' </series>'
+' </Column2DChart>'
+'<Style>'
+'.seriesStyle {labelPosition:inside;fontSize:11;color:#ffffff;}'
+'</Style>'
+'</rMateChart>';
return layoutStr;
}
function makeLineChart(chartId, visi, categoryField, yField, chartData, unit){
var yUnit = "";
if( unit == null || unit == "" ){
unit ="";
}else{
yUnit = unit.split(":")[1].split(")")[0].replace(/\s/gi, "");
}
// 스트링 형식으로 레이아웃 정의.
var layoutStr = '<rMateChart backgroundColor="#FFFFFF" borderThickness="1" borderStyle="none">'
+'<Options>'
+'<SubCaption text="'+ unit +'" textAlign="right" />'
+'</Options>'
+' <CurrencyFormatter id="fmt" currencySymbol="('+ yUnit +')" alignSymbol="right"/>'
+'<NumberFormatter id="numFmt" precision="-1" useThousandsSeparator="true"/>'
+'<Line2DChart showDataTips="true" dataTipDisplayMode="axis" paddingTop="0" dataTipFormatter="{numFmt}">'
+'<horizontalAxis>'
+'<CategoryAxis categoryField="'+ categoryField +'"/>'
+'</horizontalAxis>'
+'<verticalAxis>'
+' <LinearAxis id="vAxis" formatter="{fmt}"/>'
+'</verticalAxis>'
+'<verticalAxisRenderers>'
+' <Axis2DRenderer axis="{vAxis}" visible="'+visi+'"/>'
+'</verticalAxisRenderers>'
+'<series>'
+'<Line2DSeries labelPosition="up" yField="'+ yField +'" form="segment" dashLinePattern="2" itemRenderer="RectangleItemRenderer" radius="6">'
+'<fills>'
+' <SolidColor color="0x316a9d"/>' // fills : itemRenderer의 안쪽의 공백의 채우기 색상 입니다.
+' <SolidColor color="0xffca9b"/>'
+' <SolidColor color="0xff66cc"/>'
+'</fills>'
+'<showDataEffect>'
+ '<SeriesClip duration="1000"/>'
+'</showDataEffect>'
+'</Line2DSeries>'
+'</series>'
+'<annotationElements>'
+'<CrossRangeZoomer enableZooming="false" horizontalLabelFormatter="{numFmt}" horizontalStrokeEnable="false"/>'
+'</annotationElements>'
+'</Line2DChart>'
+'</rMateChart>';
return layoutStr;
}
function makeLineChartColor(chartId, visi, categoryField, yField, chartData ,bgColor,unit){
var yUnit = "";
if( unit == null || unit == "" ){
unit ="";
}else{
yUnit = unit.split(":")[1].split(")")[0].replace(/\s/gi, "");
}
// 스트링 형식으로 레이아웃 정의.
var layoutStr = '<rMateChart backgroundColor="'+bgColor+'" borderThickness="1" borderStyle="none">'
+'<Options>'
+'<SubCaption text="'+ unit +'" textAlign="right" />'
+'</Options>'
+' <CurrencyFormatter id="fmt" currencySymbol="('+ yUnit +')" alignSymbol="right"/>'
+'<NumberFormatter id="numFmt" precision="1" useThousandsSeparator="true"/>'
+'<Line2DChart showDataTips="true" dataTipDisplayMode="axis" paddingTop="0" dataTipFormatter="{numFmt}" displayCompleteCallFunction="displayCallFunction">'
+'<horizontalAxis>'
+'<CategoryAxis categoryField="'+ categoryField +'"/>'
+'</horizontalAxis>'
+'<verticalAxis>'
+' <LinearAxis id="vAxis" formatter="{fmt}"/>'
+'</verticalAxis>'
+'<series>'
+'<Line2DSeries labelPosition="up" yField="'+ yField +'" form="segment" dashLinePattern="2" itemRenderer="RectangleItemRenderer" radius="6">'
+'<fills>'
+' <SolidColor color="0x316a9d"/>' // fills : itemRenderer의 안쪽의 공백의 채우기 색상 입니다.
+' <SolidColor color="0xffca9b"/>'
+' <SolidColor color="0xff66cc"/>'
+'</fills>'
+'<showDataEffect>'
+ '<SeriesClip duration="1000"/>'
+'</showDataEffect>'
+'</Line2DSeries>'
+'</series>'
+'<annotationElements>'
+'<CrossRangeZoomer enableZooming="false" horizontalLabelFormatter="{numFmt}" horizontalStrokeEnable="false"/>'
+'</annotationElements>'
+'</Line2DChart>'
+'</rMateChart>';
return layoutStr;
}
function makePieChart(chartId, categoryField, yField, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr =
'<rMateChart backgroundColor="#FFFFFF" borderStyle="none">'
+' <Options>'
+' <SubCaption text="'+unit+'" textAlign="right" />' //단위
+' <Legend useVisibleCheck="true"/>'
+' </Options>'
+'<NumberFormatter id="numFmt"/>'
/*
Pie3D 차트 생성시에 필요한 Pie3DChart 정의합니다
showDataTips : 데이터에 마우스를 가져갔을 때 나오는 Tip을 보이기/안보이기 속성입니다.
*/
+'<Pie2DChart showDataTips="true" depth="50" >'
+'<series>'
// 파이에 색상을 주고 싶으면 fillJsFunction="fillJsFunc"을 추가
+'<Pie2DSeries nameField="'+ categoryField +'" field="'+ yField +'" labelPosition="inside" color="#ffffff" startAngle="120" >'
/* Pie3DChart 정의 후 Pie3DSeries labelPosition="inside"정의합니다 */
+'<showDataEffect>'
/* 차트 생성시에 Effect를 주고 싶을 때 shoDataEffect정의합니다 */
+'<SeriesInterpolate duration="1000"/>'
/*
SeriesSlide 효과는 시리즈 데이터가 데이터로 표시될 때 한쪽에서 미끄러지듯 나타나는 효과를 적용합니다
- 공통 -
elementOffset : effect를 지연시키는 시간을 지정합니다 default:20
minimumElementDuration : 각 엘리먼트의 최소 지속 시간을 설정합니다 default:0
이 값보다 짧은 시간에 effect가 실행되지 않습니다
offset : effect개시의 지연시간을 설정합니다 default:0
perElementOffset : 각 엘리먼트의 개시 지연시간을 설정합니다
- SeriesSlide -
direction : left:왼쪽, right:오른쪽, up:위, down:아래 default는 left입니다
*/
+'</showDataEffect>'
+'</Pie2DSeries>'
+'</series>'
+'</Pie2DChart>'
+'</rMateChart>';
return layoutStr;
}
/*
레이더 차트
data : 실제 표기될 data (json 형식)
color : 막대에 표시할 색상( 색상표 형식의 배열 ex. ["#3300FF", "#990033", "#00FFCC"];) 없을경우 기본색상으로 들어간다.
legendClick : 범례에 있는 체크박스 유무 (true, false)
legendPosition : 범례의 위치 (top, bottom, left, right)
groupId : 그룹으로 묶을 ID (배열)
displayName : 범례와 데이터팁에 표시될 이름(배열)
dataTipVisible : 데이터팁 표시유무(true, false)
legendVisible : 범례 표시유무 (true, false)
chartId : 차트의 id
max : 축 최대값(0이면 자동)
maximum="5" 사립대학재정지표 맥스값 "5"로 고정
*/
function makeRadarChart(title, subTitle, data , legendClick, legendPosition, groupId, categoryField, displayName, dataTipVisible, legendVisible, chartId, max ,unit){
chartData = data;
layoutStr = '<rMateChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="none">'
layoutStr += '<Options>'
layoutStr += '<Caption text="'+title+'" fontFamily="맑은 고딕"/>';
if(legendVisible ){
layoutStr += '<Legend useVisibleCheck="'+legendClick+'" defaultMouseOverAction="'+legendClick+'" fontFamily="맑은 고딕" position="'+legendPosition+'" />';
}
if( subTitle.length > 0 ){
layoutStr += '<SubCaption text="'+unit+'" styleName="subCaptionStyle" font-weight="bold" textAlign="right"/>';
}
layoutStr += '</Options>'
+'<RadarChart id="chart1" isSeriesOnAxis="true" type="polygon" paddingTop="20" paddingBottom="20" showDataTips="'+dataTipVisible+'" >'
/*
Radar 차트 생성시에 필요한 RadarChart 정의합니다
showDataTips : 데이터에 마우스를 가져갔을 때 나오는 Tip을 보이기/안보이기 속성입니다.
isSeriesOnAxis : 차트 시리즈가 radialAxis위에 표현될지 여부를 나타냅니다
type - circle, polygon : Rader차트의 타입(원형, 다각형)입니다
이 예제에서는 polygon입니다
*/
+'<radialAxis>';
if(max > 0){
layoutStr +='<LinearAxis id="rAxis" maximum="'+ max +'"/>';
}else{
layoutStr +='<LinearAxis id="rAxis"/>';
}
layoutStr +='</radialAxis>'
+'<angularAxis>';
if(title.substring(title.length-4,title.length) == "2015"){
layoutStr +='<CategoryAxis id="aAxis" categoryField="'+categoryField+'" displayName="Category" labelJsFunction="labelFunc2"/>';
}
else{
layoutStr +='<CategoryAxis id="aAxis" categoryField="'+categoryField+'" displayName="Category" labelJsFunction="labelFunc3"/>';
}
layoutStr +='</angularAxis>'
+'<radialAxisRenderers>'
/* radialAxis렌더러 정의 */
/* 가로, 세로축 모두 표시 */
+'<Axis2DRenderer axis="{rAxis}" horizontal="true" visible="true" tickPlacement="outside" tickLength="4">'
+'<axisStroke>'
+'<Stroke color="#555555" weight="1"/>'
+'</axisStroke>'
+'</Axis2DRenderer>'
+'<Axis2DRenderer axis="{rAxis}" horizontal="false" visible="false" tickPlacement="outside" tickLength="4">'
+'<axisStroke>'
+'<Stroke color="#555555" weight="1"/>'
+'</axisStroke>'
+'</Axis2DRenderer>'
+'</radialAxisRenderers>'
+'<angularAxisRenderers>'
+'<AngularAxisRenderer axis="{aAxis}"/>'
+'</angularAxisRenderers>'
+'<series>';
for( var i = 0 ; i < groupId.length ; i++){
layoutStr += '<RadarSeries field="'+groupId[i]+'" displayName="'+displayName[i]+'">';
layoutStr += '<showDataEffect>';
layoutStr += '<SeriesInterpolate/>';
layoutStr += '</showDataEffect>';
layoutStr += '</RadarSeries>';
}
layoutStr += '</series>'
+'</RadarChart>'
+'</rMateChart>';
return layoutStr;
}
/*function makeRadarChart(title, subTitle, chartId, divId, categoryField, yField, displayName, chartData){
var layoutStr =
'<rMateChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="none">'
+'<Options>'
+'<Caption text="'+ title +'" fontFamily="맑은 고딕"/>'
+'<SubCaption text="'+ subTitle +'"/>'
+'<Legend useVisibleCheck="true" defaultMouseOverAction="true" fontFamily="맑은 고딕"/>'
+'</Options>'
+'<RadarChart id="chart1" isSeriesOnAxis="true" type="polygon" paddingTop="20" paddingBottom="20" showDataTips="true">'
Radar 차트 생성시에 필요한 RadarChart 정의합니다
showDataTips : 데이터에 마우스를 가져갔을 때 나오는 Tip을 보이기/안보이기 속성입니다.
isSeriesOnAxis : 차트 시리즈가 radialAxis위에 표현될지 여부를 나타냅니다
type - circle, polygon : Rader차트의 타입(원형, 다각형)입니다
이 예제에서는 polygon입니다
+'<radialAxis>'
+'<LinearAxis id="rAxis"/>'
+'</radialAxis>' +'<angularAxis>'
+'<CategoryAxis id="aAxis" categoryField="'+ categoryField +'" displayName="Category"/>'
+'</angularAxis>'
+'<radialAxisRenderers>'
radialAxis렌더러 정의
가로, 세로축 모두 표시
+'<Axis2DRenderer axis="{rAxis}" horizontal="true" visible="true" tickPlacement="outside" tickLength="4">'
+'<axisStroke>'
+'<Stroke color="#555555" weight="1"/>'
+'</axisStroke>'
+'</Axis2DRenderer>'
+'<Axis2DRenderer axis="{rAxis}" horizontal="false" visible="true" tickPlacement="outside" tickLength="4">'
+'<axisStroke>'
+'<Stroke color="#555555" weight="1"/>'
+'</axisStroke>'
+'</Axis2DRenderer>'
+'</radialAxisRenderers>'
+'<angularAxisRenderers>'
+'<AngularAxisRenderer axis="{aAxis}"/>'
+'</angularAxisRenderers>'
+'<series>';
for(var i = 0 ; i < yField.length ; i++){
layoutStr +='<RadarSeries field="'+ yField[i] +'" displayName="'+ displayName[i] +'">'
RadarChart 정의 후 RadarSeries 정의합니다
+'<showDataEffect>'
차트 생성시에 Effect를 주고 싶을 때 shoDataEffect정의합니다
+'<SeriesInterpolate/>'
SeriesInterpolate는 시리즈 데이터가 새로운 시리즈 데이터로 표시될 때 이동하는 효과를 적용합니다
- 공통속성 -
elementOffset : effect를 지연시키는 시간을 지정합니다 default:20
minimumElementDuration : 각 엘리먼트의 최소 지속 시간을 설정합니다 default:0
이 값보다 짧은 시간에 effect가 실행되지 않습니다
offset : effect개시의 지연시간을 설정합니다 default:0
perElementOffset : 각 엘리먼트의 개시 지연시간을 설정합니다
+'</showDataEffect>'
+'</RadarSeries>';
}
layoutStr +='</series>'
+'</RadarChart>'
+'</rMateChart>';
//차트 데이터
var chartData = [{"catName":"Food", "year2010":100, "year2011":100, "year2012":180, "year2013":150}
,{"catName":"Health Care", "year2010":80, "year2011":120, "year2012":200, "year2013":210}
,{"catName":"Transportation", "year2010":70, "year2011":115, "year2012":100, "year2013":240}
,{"catName":"Clothing", "year2010":80, "year2011":120, "year2012":140, "year2013":210}
,{"catName":"Education", "year2010":90, "year2011":160, "year2012":130, "year2013":200}
,{"catName":"Shelter", "year2010":100, "year2011":180, "year2012":165, "year2013":140}
,{"catName":"Leisure", "year2010":76, "year2011":120, "year2012":130, "year2013":170}
,{"catName":"Others", "year2010":80, "year2011":140, "year2012":140, "year2013":190}];
}*/
function makeColumnMultiChart(chartId, categoryField, yField, displayName, chartData, unit, color){
var yUnit = "";
if( unit == null || unit == "" ){
unit ="";
}else{
yUnit = unit.split(":")[1].split(")")[0].replace(/\s/gi, "");
}
var layoutStr = '<rMateChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="none">'
+'<NumberFormatter id="numFmt" precision="0"/>'
+'<Options>'
+'<Legend defaultMouseOverAction="false" useVisibleCheck="true"/>'
+'<SubCaption text="'+unit+'" textAlign="right" />' //단위
+'</Options>'
+' <CurrencyFormatter id="fmt" currencySymbol="('+ yUnit +')" alignSymbol="right"/>'
+' <NumberFormatter id="numFmt" precision="0" useThousandsSeparator="true"/>'
+'<Column2DChart showDataTips="true" selectionMode="true" columnWidthRatio="0.65" >'
+'<horizontalAxis>'
+'<CategoryAxis categoryField="'+ categoryField +'"/>'
+'</horizontalAxis>'
+'<verticalAxis>'
+'<LinearAxis formatter="{fmt}" />'
+'</verticalAxis>'
+'<series>';
/* Column3D Multi-Sereis 를 생성시에는 Column3DSeries 여러 개 정의합니다 */
for(var i = 0 ; i < yField.length ; i++){
layoutStr += '<Column2DSeries labelPosition="outside" yField="'+ yField[i] +'" displayName="'+ displayName[i] +'" showValueLabels="[i]">'
+' <showDataEffect>'
+' <SeriesInterpolate/>'
+' </showDataEffect>'
+' <fill> '
+' <SolidColor color="'+color[i]+'" alpha="1"/> '
+' </fill> '
+' <stroke> '
+' <Stroke color="'+color[i]+'" weight="1"/> '
+' </stroke> '
+'</Column2DSeries>';
}
layoutStr += '</series>'
+'</Column2DChart>'
+'</rMateChart>';
return layoutStr;
}
function makeBarChart(chartId, categoryField, yField, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr =
'<rMateChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="none">'
+'<Options>'
+'<SubCaption text="'+unit+'" textAlign="right" />' //단위
+'</Options>'
+'<Bar2DChart showDataTips="true" >'
+'<horizontalAxis>'
+'<LinearAxis />' //minimum="10000" maximum="50000" interval="5000"
+'</horizontalAxis>'
+'<verticalAxis>'
+'<CategoryAxis categoryField="'+ categoryField +'"/>'
+'</verticalAxis>'
+'<series>'
+'<Bar2DSeries labelPosition="inside" xField="'+ yField +'" displayName="'+ yField +'" color="#ffffff">'
+'<showDataEffect>'
+'<SeriesInterpolate/>'
+'</showDataEffect>'
+'</Bar2DSeries>'
+'</series>'
+'</Bar2DChart>'
+'</rMateChart>';
return layoutStr;
}
function makeLineMultiChart(chartId, categoryField, yField, displayName, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr =
'<rMateChart cornerRadius="12" backgroundColor="0xffffff" borderStyle="none">'
+'<Options>'
+'<SubCaption text="'+unit+'" textAlign="right" />' //단위
+'<Legend defaultMouseOverAction="false" useVisibleCheck="true"/>'
+'</Options>'
+'<NumberFormatter id="numFmt" precision="0"/>'
+'<Line2DChart showDataTips="true" dataTipDisplayMode="axis" paddingTop="0" >'
+'<horizontalAxis>'
+'<CategoryAxis categoryField="'+ categoryField +'"/>'
+'</horizontalAxis>'
+'<verticalAxis>'
+'<LinearAxis />'
+'</verticalAxis>'
+'<series>';
for(var i = 0 ; i < yField.length ; i++){
/*
itemRenderer는 Tip이 보여지는 영역차트 부분에 ItemRenderer에서 제공하는 모양을 그려줍니다
이 예제에서는 Diamond입니다
사용할 수 있는 도형을 모두 표현한 예제는 Chart Samples 의 범례 예제를 참고하십시오.
*/
layoutStr += '<Line2DSeries labelPosition="up" yField="'+yField[i]+'" radius="5" displayName="'+displayName[i]+'" form="segment" lineStyle="dashLine" dashLinePattern="2" itemRenderer="RectangleItemRenderer">'
/* 아이템렌더러(데이터 마커) 테두리 색상 */
+'<showDataEffect>'
+'<SeriesInterpolate/>'
+'</showDataEffect>'
+'</Line2DSeries>';
}
layoutStr += '</series>'
+'<annotationElements>'
+'<CrossRangeZoomer zoomType="horizontal" fontSize="11" color="0xFFFFFF" horizontalLabelFormatter="{numFmt}" verticalLabelPlacement="bottom" horizontalLabelPlacement="left" enableZooming="false" enableCrossHair="true" backgroundColor="0xeb494a" borderColor="0xeb494a">'
+'</CrossRangeZoomer>'
+'</annotationElements>'
+'</Line2DChart>'
+'</rMateChart>';
//차트 데이터
return layoutStr;
}
function makeCombinationChart(chartId, categoryField, yField, displayName, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr =
'<rMateChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="none">'
+'<Options>'
+'<SubCaption text="'+unit+'" textAlign="right" />' //단위
+'</Options>'
+'<NumberFormatter id="numFmt" useThousandsSeparator="true" precision="0"/>'
+'<Combination2DChart showDataTips="true" >'
/*
Combination3D 차트 생성시에 필요한 Combination3DChart 정의합니다
showDataTips : 데이터에 마우스를 가져갔을 때 나오는 Tip을 보이기/안보이기 속성입니다
*/
+'<verticalAxis>'
+'<LinearAxis id="vAxis1" formatter="{numFmt}" maximum="100000"/>'
+'</verticalAxis>'
+'<horizontalAxis>'
+'<CategoryAxis categoryField="'+ categoryField +'"/>'
+'</horizontalAxis>'
+'<series>'
+'<Column2DSeries labelPosition="outside" selectable="true" yField="'+ yField[0] +'" displayName="'+ yField[0] +'">'
+' <fill>'
+' <SolidColor color="'+ color[0] +'" alpha="1"/>' //color:색깔 alpha:투명도
+' </fill>'
+'<showDataEffect>'
+'<SeriesInterpolate/>'
+'</showDataEffect>'
+'</Column2DSeries>'
+'<Line2DSeries labelPosition="up" selectable="true" yField="'+ yField[1] +'" displayName="'+ yField[1] +'" styleName="lineSeriesLabel" showValueLabels="[10]" form="segment" lineStyle="dashLine" dashLinePattern="2" itemRenderer="RectangleItemRenderer" radius="6">'
+'<lineStroke>' // lineStroke : 선에 대한 색상 입니다.
+' <Stroke color="'+ color[1] +'" weight="2"/>'
+'</lineStroke>'
+'<verticalAxis>'
+'<LinearAxis id="vAxis2"/>'
+'</verticalAxis>'
+'<showDataEffect>'
+'<SeriesInterpolate/>'
+'</showDataEffect>'
+'</Line2DSeries>'
+'</series>'
+'<verticalAxisRenderers>'
+'<Axis3DRenderer axis="{vAxis1}" showLine="true"/>'
+'<Axis3DRenderer axis="{vAxis2}" showLine="true"/>'
+'</verticalAxisRenderers>'
+'</Combination2DChart>'
+'<Style>'
+'.lineSeriesLabel{'
+'color:#777777;'
+'fontWeight:normal;'
+'}'
+'</Style>'
+'</rMateChart>';
//차트 데이터
/*chartData = [{"Month":"Jan","Profit":1000,"Cost":100,"Revenue":2300},
{"Month":"Feb","Profit":1400,"Cost":140,"Revenue":1200},
{"Month":"Mar","Profit":1500,"Cost":120,"Revenue":1600},
{"Month":"Apr","Profit":1900,"Cost":130,"Revenue":1300},
{"Month":"May","Profit":1400,"Cost":90,"Revenue":1000},
{"Month":"Jun","Profit":2000,"Cost":50,"Revenue":1200},
{"Month":"Jul","Profit":1800,"Cost":140,"Revenue":1000},
{"Month":"Aug","Profit":2500,"Cost":80,"Revenue":1600},
{"Month":"Sep","Profit":3000,"Cost":190,"Revenue":1200},
{"Month":"Oct","Profit":2000,"Cost":230,"Revenue":1000},
{"Month":"Nov","Profit":2100,"Cost":240,"Revenue":1700},
{"Month":"Dec","Profit":1700,"Cost":190,"Revenue":2300}];*/
return layoutStr;
}
function makeCombinationChart2(chartId, categoryField, yField, displayName, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr =
'<rMateChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="none">'
+'<Options>'
+'<SubCaption text="'+unit+'" textAlign="right" />' //단위
+'</Options>'
+'<NumberFormatter id="numFmt" useThousandsSeparator="true" precision="0"/>'
+'<Combination2DChart showDataTips="true" >'
/*
Combination3D 차트 생성시에 필요한 Combination3DChart 정의합니다
showDataTips : 데이터에 마우스를 가져갔을 때 나오는 Tip을 보이기/안보이기 속성입니다
*/
+'<verticalAxis>'
+'<LinearAxis id="vAxis1" formatter="{numFmt}" maximum="20000"/>'
+'</verticalAxis>'
+'<horizontalAxis>'
+'<CategoryAxis categoryField="'+ categoryField +'"/>'
+'</horizontalAxis>'
+'<series>'
+'<Column2DSeries labelPosition="outside" selectable="true" yField="'+ yField[1] +'" displayName="'+ yField[1] +'">'
+' <fill>'
+' <SolidColor color="'+ color[1] +'" alpha="1"/>' //color:색깔 alpha:투명도
+' </fill>'
+'<showDataEffect>'
+'<SeriesInterpolate/>'
+'</showDataEffect>'
+'</Column2DSeries>'
+'<Line2DSeries labelPosition="up" selectable="true" yField="'+ yField[0] +'" displayName="'+ yField[0] +'" styleName="lineSeriesLabel" showValueLabels="[10]" form="segment" lineStyle="dashLine" dashLinePattern="2" itemRenderer="RectangleItemRenderer" radius="6">'
+'<lineStroke>' // lineStroke : 선에 대한 색상 입니다.
+' <Stroke color="'+ color[0] +'" weight="2"/>'
+'</lineStroke>'
+'<verticalAxis>'
+'<LinearAxis id="vAxis2"/>'
+'</verticalAxis>'
+'<showDataEffect>'
+'<SeriesInterpolate/>'
+'</showDataEffect>'
+'</Line2DSeries>'
+'</series>'
+'<verticalAxisRenderers>'
+'<Axis3DRenderer axis="{vAxis1}" showLine="true"/>'
+'<Axis3DRenderer axis="{vAxis2}" showLine="true"/>'
+'</verticalAxisRenderers>'
+'</Combination2DChart>'
+'<Style>'
+'.lineSeriesLabel{'
+'color:#777777;'
+'fontWeight:normal;'
+'}'
+'</Style>'
+'</rMateChart>';
//차트 데이터
return layoutStr;
}
function makeCombinationImageChart(url, chartId, categoryField, yField, displayName, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr =
'<rMateChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="none">'
+'<Options>'
+'<SubCaption text="'+unit+'" textAlign="right" />' //단위
+'</Options>'
+'<NumberFormatter id="numFmt" useThousandsSeparator="true" precision="0"/>'
+'<Combination3DChart showDataTips="true">'
/*
Combination3D 차트 생성시에 필요한 Combination3DChart 정의합니다
showDataTips : 데이터에 마우스를 가져갔을 때 나오는 Tip을 보이기/안보이기 속성입니다
*/
+'<verticalAxis>'
+'<LinearAxis id="vAxis1" formatter="{numFmt}" maximum="3600"/>'
+'</verticalAxis>'
+'<horizontalAxis>'
+'<CategoryAxis categoryField="Month"/>'
+'</horizontalAxis>'
+'<series>'
+'<ImageSeries yField="Data1" imageDisplayType="single" labelPosition="outside" formatter="{numFmt}">'
+'<imgSource>'
+'<ImageSourceItem maintainAspectRatio="false" url="'+ url +'"/>'
+'</imgSource>'
+'<showDataEffect>'
+'<SeriesInterpolate/>'
+'</showDataEffect>'
+'</ImageSeries>'
+'<Line2DSeries labelPosition="up" selectable="true" yField="Data1" displayName="Data1" styleName="lineSeriesLabel" showValueLabels="[10]" form="segment" lineStyle="dashLine" dashLinePattern="2" itemRenderer="RectangleItemRenderer" radius="6">'
+'<verticalAxis>'
+'<LinearAxis id="vAxis2"/>'
+'</verticalAxis>'
+'<showDataEffect>'
+'<SeriesInterpolate/>'
+'</showDataEffect>'
+'</Line2DSeries>'
+'</series>'
+'<verticalAxisRenderers>'
+'<Axis3DRenderer axis="{vAxis1}" showLine="true"/>'
+'<Axis3DRenderer axis="{vAxis2}" showLine="true"/>'
+'</verticalAxisRenderers>'
+'</Combination3DChart>'
+'<Style>'
+'.lineSeriesLabel{'
+'color:#777777;'
+'fontWeight:normal;'
+'}'
+'</Style>'
+'</rMateChart>';
//차트 데이터
chartData = [{"Year":2006,"Data1":1500},
{"Year":2007,"Data1":1000},
{"Year":2008,"Data1":1400},
{"Year":2009,"Data1":1500},
{"Year":2010,"Data1":1900},
{"Year":2011,"Data1":1400},
{"Year":2012,"Data1":1000},
{"Year":2013,"Data1":1400}];
return layoutStr;
}
function makeDoughnutChart(chartId, categoryField, yField, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr =
'<rMateChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="none">'
+'<Options>'
+' <SubCaption text="'+unit+'" textAlign="right" />' //단위
+' <Legend position="bottom" hAlign="center" useVisibleCheck="false" labelPlacement="bottom" defaultMouseOverAction="true"/>'
+'</Options>'
+'<Pie2DChart id="'+ chartId +'" innerRadius="0.3" showDataTips="true" >'
/*
Doughnut2D 차트 생성시에 필요한 Pie2DChart 정의합니다
showDataTips : 데이터에 마우스를 가져갔을 때 나오는 Tip을 보이기/안보이기 속성입니다.
innerRadius : PieChart 가운데에 빈 공간을 만듭니다. 유효값 0.1 ~ 0.9 0은 PieChart 1은 차트 사라짐
*/
+'<series>'
+'<Pie2DSeries nameField="'+categoryField+'" field="'+yField+'" labelPosition="callout">'
/* Pie2DChart 정의 후 Pie2DSeries labelPosition="inside"정의합니다 */
+'<showDataEffect>'
/* 차트 생성시에 Effect를 주고 싶을 때 shoDataEffect정의합니다 */
+'<SeriesSlide duration="1000"/>'
/*
SeriesSlide 효과는 시리즈 데이터가 데이터로 표시될 때 한쪽에서 미끄러지듯 나타나는 효과를 적용합니다
- 공통속성 -
elementOffset : effect를 지연시키는 시간을 지정합니다 default:20
minimumElementDuration : 각 엘리먼트의 최소 지속 시간을 설정합니다 default:0
이 값보다 짧은 시간에 effect가 실행되지 않습니다
offset : effect개시의 지연시간을 설정합니다 default:0
perElementOffset : 각 엘리먼트의 개시 지연시간을 설정합니다
- SeriesSlide속성 -
*/
+'</showDataEffect>'
+'</Pie2DSeries>'
+'</series>'
+'</Pie2DChart>'
+'</rMateChart>';
return layoutStr;
}
function makeDoughnutChart2(chartId, categoryField, yField, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr =
'<rMateChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="none">'
+'<Options>'
+' <SubCaption text="'+unit+'" textAlign="right" />' //단위
+' <Legend position="bottom" hAlign="center" useVisibleCheck="false" labelPlacement="bottom" defaultMouseOverAction="true"/>'
+'</Options>'
+'<Pie2DChart id="'+ chartId +'" innerRadius="0.3" showDataTips="true" >'
/*
Doughnut2D 차트 생성시에 필요한 Pie2DChart 정의합니다
showDataTips : 데이터에 마우스를 가져갔을 때 나오는 Tip을 보이기/안보이기 속성입니다.
innerRadius : PieChart 가운데에 빈 공간을 만듭니다. 유효값 0.1 ~ 0.9 0은 PieChart 1은 차트 사라짐
*/
+'<series>'
+'<Pie2DSeries nameField="'+categoryField+'" field="'+yField+'" labelPosition="callout">'
/* Pie2DChart 정의 후 Pie2DSeries labelPosition="inside"정의합니다 */
+'<showDataEffect>'
/* 차트 생성시에 Effect를 주고 싶을 때 shoDataEffect정의합니다 */
+'<SeriesSlide duration="1000"/>'
/*
SeriesSlide 효과는 시리즈 데이터가 데이터로 표시될 때 한쪽에서 미끄러지듯 나타나는 효과를 적용합니다
- 공통속성 -
elementOffset : effect를 지연시키는 시간을 지정합니다 default:20
minimumElementDuration : 각 엘리먼트의 최소 지속 시간을 설정합니다 default:0
이 값보다 짧은 시간에 effect가 실행되지 않습니다
offset : effect개시의 지연시간을 설정합니다 default:0
perElementOffset : 각 엘리먼트의 개시 지연시간을 설정합니다
- SeriesSlide속성 -
*/
+'</showDataEffect>'
+'</Pie2DSeries>'
+'</series>'
+'</Pie2DChart>'
+'</rMateChart>';
return layoutStr;
}
function makeGaugeCircularGradientChart(chartId, categoryField, yField, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr = '<rMateChart backgroundColor="#FFFFFF" borderStyle="none">'
+'<Options>'
+' <SubCaption text="'+unit+'" textAlign="right" />' //단위
+'</Options>'
+'<CurrencyFormatter id="numFmt" precision="0" currencySymbol="%" alignSymbol="right"/>'
+'<CircularGauge width="350" height="350" '
+'startAngle="120" minimumAngle="0" maximumAngle="300" padding="15" '
+'minimum="0" maximum="100" value="50" '
+'interval="10" minorInterval="2" '
+'tickGap="-16" labelGap="-2" '
+'majorTickType="none" minorTickType="circle" '
+'needleLengthRatio="0.8" '
+'tickLabelPlacement="outside" '
+'minorTickRadius="1" '
+'valueXOffset="0" valueYOffset="90" '
+'tickLabelStyleName="tickText" '
+'valueLabelStyleName="valueText" '
+'editMode="true" liveDragging="true" '
+'bounceAnimating="true" '
+'showDataTip="true" '
+'showTrackColor="true" '
+'trackValues="[0,30,70,100]" '
+'trackColors="[0x8ec041,0x5ebaef,0xe43345]" '
+'trackAlphas="[1,1,1]" '
+'trackInnerRadius="0.5" '
+'trackOuterRadius="1" '
+' '
+'patternJsFunction="patternFunc">'
/* 게이지에서의 패턴은 trackValues와 관련이 있습니다. */
/* trackValues를 설정하고 trackColors를 설정합니다. */
/* 게이지에서의 패턴은 trackColors에 나타나게 됩니다. */
/* patternMode를 true하여 패턴을 사용할 수 있도록 설정 합니다. */
/* patternJsFunction을 설정하여 게이지에 패턴을 출력하도록 설정 합니다. */
+'<frameStroke>'
+'<Stroke color="#ffffff" weight="1" alpha="0"/>'
+'</frameStroke>'
+'</CircularGauge>'
+'<Style>'
+'.valueText{'
+'fontSize:20;'
+'textAlign:center;'
+'borderColor:#999999;'
+'backgroundColor:#FFFFFF;'
+'paddingTop:4;'
+'borderThickness:1;'
+'borderAlpha:1;'
+'borderStyle:none;'
+'}'
+'.tickText{'
+'fontSize:15;'
+'color:#000000'
+'}'
+'</Style>'
+'</rMateChart>';
return layoutStr;
}
function makeGaugeCircularGradientChart2(chartId, categoryField, yField, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr = '<rMateChart backgroundColor="#FFFFFF" borderStyle="none">'
+'<Options>'
+' <SubCaption text="'+unit+'" textAlign="right" />' //단위
+'</Options>'
+'<CurrencyFormatter id="numFmt" precision="0" currencySymbol="%" alignSymbol="right"/>'
+'<CircularGauge width="350" height="350" '
+'startAngle="120" minimumAngle="0" maximumAngle="300" padding="15" '
+'minimum="0" maximum="1000" value="50" '
+'interval="100" minorInterval="2" '
+'tickGap="-16" labelGap="-2" '
+'majorTickType="none" minorTickType="circle" '
+'needleLengthRatio="0.8" '
+'tickLabelPlacement="outside" '
+'minorTickRadius="1" '
+'valueXOffset="0" valueYOffset="90" '
+'tickLabelStyleName="tickText" '
+'valueLabelStyleName="valueText" '
+'editMode="true" liveDragging="true" '
+'bounceAnimating="true" '
+'showDataTip="true" '
+'showTrackColor="true" '
+'trackValues="[0,100,200,300,400,500,600,700,800,900,1000]" '
+'trackColors="[0x8ec041,0x5ebaef,0xe43345,0x8ec041,0x5ebaef,0xe43345,0x8ec041,0x5ebaef,0xe43345,0x8ec041]" '
+'trackAlphas="[1,1,1]" '
+'trackInnerRadius="0.5" '
+'trackOuterRadius="1" '
+' '
+'patternJsFunction="patternFunc">'
/* 게이지에서의 패턴은 trackValues와 관련이 있습니다. */
/* trackValues를 설정하고 trackColors를 설정합니다. */
/* 게이지에서의 패턴은 trackColors에 나타나게 됩니다. */
/* patternMode를 true하여 패턴을 사용할 수 있도록 설정 합니다. */
/* patternJsFunction을 설정하여 게이지에 패턴을 출력하도록 설정 합니다. */
+'<frameStroke>'
+'<Stroke color="#ffffff" weight="1" alpha="0"/>'
+'</frameStroke>'
+'</CircularGauge>'
+'<Style>'
+'.valueText{'
+'fontSize:20;'
+'textAlign:center;'
+'borderColor:#999999;'
+'backgroundColor:#FFFFFF;'
+'paddingTop:4;'
+'borderThickness:1;'
+'borderAlpha:1;'
+'borderStyle:none;'
+'}'
+'.tickText{'
+'fontSize:15;'
+'color:#000000'
+'}'
+'</Style>'
+'</rMateChart>';
return layoutStr;
}
function makeMapChart(color, chartId, chartData){
/*var layoutStr = '<?xml version="1.0" encoding="utf-8"?> ';
layoutStr += ' <rMateMapChart horizontalAlign="center"> ';
layoutStr += ' <MapChart id="mainMap" showDataTips="true" dataTipJsFunction="dataTipFunction" mapChangeJsFunction="clickFunction"> ';
layoutStr += ' <series> ';
layoutStr += ' <MapSeries id="mapseries" selectionMarking="line" labelPosition="inside" displayName="Map Series" localFillJsFunction="colorFunction"> ';
layoutStr += ' <filters> ';
layoutStr += ' <DropShadowFilter distance="1" angle="45" color="#888888"/> ';
layoutStr += ' </filters> ';
layoutStr += ' <showDataEffect> ';
layoutStr += ' <SeriesInterpolate duration="1000" /> ';
layoutStr += ' </showDataEffect> ';
layoutStr += ' <stroke> ';
layoutStr += ' <Stroke color="#FFF" weight="0.8" alpha="1"/> ';
layoutStr += ' </stroke> ';
layoutStr += ' </MapSeries> ';
layoutStr += ' </series> ';
layoutStr += ' </MapChart> ';
layoutStr += ' <Box horizontalAlign="center" paddingTop="20" horizontalScrollPolicy="off" verticalScrollPolicy="off"> ';
layoutStr += ' <SubLegend direction="horizontal" height="30" borderStyle="solid" defaultMouseOverAction="true"> ';
layoutStr += ' <LegendItem label="30이하"> ';
layoutStr += ' <fill> ';
layoutStr += ' <SolidColor color="#BFE4FF"/> ';
layoutStr += ' </fill> ';
layoutStr += ' </LegendItem> ';
layoutStr += ' <LegendItem label="50이하"> ';
layoutStr += ' <fill> ';
layoutStr += ' <SolidColor color="#B6C5FF"/> ';
layoutStr += ' </fill> ';
layoutStr += ' </LegendItem> ';
layoutStr += ' <LegendItem label="90이하"> ';
layoutStr += ' <fill> ';
layoutStr += ' <SolidColor color="#90B2FF"/> ';
layoutStr += ' </fill> ';
layoutStr += ' </LegendItem> ';
layoutStr += ' <LegendItem label="90이상"> ';
layoutStr += ' <fill> ';
layoutStr += ' <SolidColor color="#5589F2"/> ';
layoutStr += ' </fill> ';
layoutStr += ' </LegendItem> ';
layoutStr += ' </SubLegend> ';
layoutStr += ' </Box> ';
layoutStr += ' </rMateMapChart> ';*/
var layoutStr = '<?xml version="1.0" encoding="utf-8"?> ';
// layoutStr += ' <rMateMapChart> ';
// layoutStr += ' <MapChart id="mainMap1" showDataTips="true" dataTipType="Type2"> ';
// layoutStr += ' <series> ';
// layoutStr += ' <MapSeries id="mapseries" interactive="true" selectionMarking="color" color="#777777" labelPosition="none" displayName="Map" selectionStrokeAlpha="0" rollOverFill="transparent" transparentValue="60"> ';
// layoutStr += ' <selectionFill> ';
// layoutStr += ' <SolidColor color="#ffffff" /> ';
// layoutStr += ' </selectionFill> ';
// layoutStr += ' <selectionStroke> ';
// layoutStr += ' <Stroke color="#ffffff" weight="0" alpha="1"/> ';
// layoutStr += ' </selectionStroke> ';
// layoutStr += ' <rollOverStroke> ';
// layoutStr += ' <Stroke color="#ffffff" weight="0" alpha="1"/> ';
// layoutStr += ' </rollOverStroke> ';
// layoutStr += ' <showDataEffect> ';
// layoutStr += ' <SeriesInterpolate duration="1000"/> ';
// layoutStr += ' </showDataEffect> ';
// layoutStr += ' </MapSeries> ';
// layoutStr += ' <MapImageSeries id="image" labelField="label" imageUrlField="imgurl" horizontalCenterGapField="h" verticalCenterGapField="v" color="#ffffff" labelPosition="bottom" imageWidth="57" imageHeight="55" selectedFill="#0f0" interactive="false" disabledColor="#ffffff" areaCodeField="code"><showDataEffect><SeriesSlide duration="1000"/></showDataEffect></MapImageSeries>';
// layoutStr += ' </series> ';
// layoutStr += ' </MapChart> ';
// layoutStr += ' </rMateMapChart> ';
layoutStr += ' <rMateMapChart> ';
layoutStr += ' <MapChart id="mainMap" showDataTips="true" drillDownEnabled="false" dataTipJsFunction="dataTipFunction" mapChangeJsFunction="clickFunction"> ';
layoutStr += ' <series> ';
layoutStr += ' <MapSeries id="mapseries" labelPosition="inside" hideOverSizeLabel="false" selectionMarking="color" selectionMarkLineColor="#758d99" rollOverFilter="true" localFill="#ebf0f4"> ';
layoutStr += ' <filters> ';
layoutStr += ' <DropShadowFilter distance="5" angle="90" color="#888888" blur="0"/> ';
layoutStr += ' </filters> ';
layoutStr += ' <showDataEffect> ';
layoutStr += ' <SeriesInterpolate duration="1000"/> ';
layoutStr += ' </showDataEffect> ';
layoutStr += ' <selectionFill> ';
layoutStr += ' <SolidColor color="#f6b149"/> ';
layoutStr += ' </selectionFill> ';
layoutStr += ' <rollOverFill> ';
layoutStr += ' <SolidColor color="#f6b149"/> ';
layoutStr += ' </rollOverFill> ';
layoutStr += ' <rollOverStroke> ';
layoutStr += ' <Stroke color="#f6b149" weight="0.25" alpha="0.25"/> ';
layoutStr += ' </rollOverStroke> ';
layoutStr += ' <stroke> ';
layoutStr += ' <Stroke color="#CAD7E0" weight="0.8" alpha="1"/> ';
layoutStr += ' </stroke> ';
layoutStr += ' </MapSeries> ';
layoutStr += ' </series> ';
layoutStr += ' </MapChart> ';
layoutStr += ' </rMateMapChart> ';
return layoutStr;
}
function makeImageRepeatChart(url, chartId, categoryField, yField, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr =
'<rMateChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="none">'
+'<Options>'
+'<SubCaption text="'+unit+'" textAlign="right" />' //단위
+'</Options>'
+'<NumberFormatter id="numFmt"/>'
+'<ImageChart id="chart" showDataTips="true" gutterLeft="20" gutterRight="20" showLabelVertically="true" fontFamily="맑은 고딕">'
/*
Image 차트 생성시에 필요한 ImageChart 정의합니다
showDataTips : 데이터에 마우스를 가져갔을 때 나오는 Tip을 보이기/안보이기 속성입니다
*/
+'<horizontalAxis>'
+'<CategoryAxis id="hAxis" categoryField="'+ categoryField +'"/>'
+'</horizontalAxis>'
+'<verticalAxis>'
+'<LinearAxis id="vAxis"/>'
+'</verticalAxis>'
+'<series>'
+'<ImageSeries yField="'+ yField +'" imageDisplayType="singleRepeat" labelPosition="outside" formatter="{numFmt}">'
/*
ImageChart 정의 후 ImageSeries 정의합니다
imageDisplayType ┬ single : 이미지 한개
├ singleRepeat : 이미지 한개 반복
└ multiple : 다중 이미지
*/
+'<imgSource>'
+'<ImageSourceItem url="'+ url +'"/>'
+'</imgSource>'
+'<showDataEffect>'
+'<SeriesSlide duration="1000" direction="up"/>'
+'</showDataEffect>'
+'</ImageSeries>'
+'</series>'
+'<verticalAxisRenderers>'
+'<Axis2DRenderer axis="{vAxis}" visible="false"/>'
+'</verticalAxisRenderers>'
+'</ImageChart>'
+'</rMateChart>';
return layoutStr;
}
function makeBubbleMapChart(color, chartId, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr = '<?xml version="1.0" encoding="utf-8"?> ';
layoutStr += ' <rMateMapChart horizontalAlign="center"> ';
layoutStr += ' <MapChart id="mainMap" showDataTips="true" > ';
layoutStr += ' <series> ';
layoutStr += ' <MapSeries id="mapseries" selectionMarking="line" labelPosition="none" displayName="Map Series" localFillJsFunction="colorFunction" > ';
layoutStr += ' <showDataEffect> ';
layoutStr += ' <SeriesInterpolate duration="1000" /> ';
layoutStr += ' </showDataEffect> ';
layoutStr += ' <stroke> ';
layoutStr += ' <Stroke color="#FFF" weight="0.8" alpha="1"/> ';
layoutStr += ' </stroke> ';
layoutStr += ' </MapSeries> ';
layoutStr += ' </series> ';
layoutStr += ' </MapChart> ';
layoutStr += ' <Box horizontalAlign="center" paddingTop="30" horizontalScrollPolicy="off" verticalScrollPolicy="off"> ';
layoutStr += ' <SubLegend useVisibleCheck="true" direction="horizontal" height="30" borderStyle="solid" defaultMouseOverAction="true" paddingTop="8" backgroundColor="#fefefe"> ';
layoutStr += ' <LegendItem label="30이하"> ';
layoutStr += ' <fill> ';
layoutStr += ' <SolidColor color="#BFE4FF"/> ';
layoutStr += ' </fill> ';
layoutStr += ' </LegendItem> ';
layoutStr += ' <LegendItem label="50이하"> ';
layoutStr += ' <fill> ';
layoutStr += ' <SolidColor color="#B6C5FF"/> ';
layoutStr += ' </fill> ';
layoutStr += ' </LegendItem> ';
layoutStr += ' <LegendItem label="90이하"> ';
layoutStr += ' <fill> ';
layoutStr += ' <SolidColor color="#90B2FF"/> ';
layoutStr += ' </fill> ';
layoutStr += ' </LegendItem> ';
layoutStr += ' <LegendItem label="90이상"> ';
layoutStr += ' <fill> ';
layoutStr += ' <SolidColor color="#5589F2"/> ';
layoutStr += ' </fill> ';
layoutStr += ' </LegendItem> ';
layoutStr += ' </SubLegend> ';
layoutStr += ' </Box> ';
layoutStr += ' </rMateMapChart> ';
return layoutStr;
}
function makeBarChartClick(chartId, categoryField, yField, chartData, functionNm,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr =
'<rMateChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="none">'
+'<Options>'
+'<SubCaption text="'+unit+'" textAlign="right" />' //단위
+'</Options>'
+'<Bar2DChart showDataTips="true" itemClickJsFunction="'+functionNm+'">'
+'<horizontalAxis>'
+'<LinearAxis />' //minimum="10000" maximum="50000" interval="5000"
+'</horizontalAxis>'
+'<verticalAxis>'
+'<CategoryAxis categoryField="'+ categoryField +'"/>'
+'</verticalAxis>'
+'<series>'
+'<Bar2DSeries labelPosition="inside" xField="'+ yField +'" displayName="'+ yField +'" color="#ffffff">'
+'<showDataEffect>'
+'<SeriesInterpolate />'
+'</showDataEffect>'
+'</Bar2DSeries>'
+'</series>'
+'</Bar2DChart>'
+'</rMateChart>';
return layoutStr;
}
function makePatternColumnChart(chartId, categoryField, yField, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr = '<rMateChart backgroundColor="0xFFFFFF" borderStyle="none">'
+'<Options>'
+'<SubCaption text="'+unit+'" textAlign="right" />' //단위
+'<Legend defaultMouseOverAction="true"/>'
+'</Options>'
+'<NumberFormatter id="numfmt" useThousandsSeparator="true"/>'
/* 차트 초기 출력시 웹 접근성 패턴을 설정하여 출력하고 싶다면 아래처럼 patternMode를 true로 설정하십시오. */
+'<Column2DChart showDataTips="true" >'
+'<horizontalAxis>'
+'<CategoryAxis categoryField="'+categoryField+'"/>'
+'</horizontalAxis>'
+'<verticalAxis>'
+'<LinearAxis formatter="{numfmt}"/>'
+'</verticalAxis>'
+'<series>'
+'<Column2DSet type="stacked" showTotalLabel="true">'
+'<series>'
+'<Column2DSeries yField="'+yField+'" displayName="'+yField+'">'
+'<showDataEffect>'
+'<SeriesInterpolate/>'
+'</showDataEffect>'
+'</Column2DSeries>'
+'</series>'
+'</Column2DSet>'
+'</series>'
+'</Column2DChart>'
+'</rMateChart>';
return layoutStr;
}
function makeImageChart(url, chartId, categoryField, yField, displayName, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr = '<rMateChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="none"> '
+'<Options>'
+'<SubCaption text="'+unit+'" textAlign="right" />' //단위
+'</Options>'
+' <NumberFormatter id="numFmt"/> '
+' <ImageChart id="chart" showDataTips="true" gutterLeft="20" gutterRight="20" showLabelVertically="true" fontFamily="맑은 고딕"> '
+' <horizontalAxis> '
+' <CategoryAxis id="hAxis" categoryField="'+categoryField+'"/> '
+' </horizontalAxis> '
+' <verticalAxis> '
+' <LinearAxis id="vAxis"/> '
+' </verticalAxis> '
+' <series> '
+' <ImageSeries yField="'+yField+'" imageDisplayType="single" labelPosition="outside" formatter="{numFmt}"> '
+' <imgSource> '
+' <ImageSourceItem maintainAspectRatio="true" url="'+url+'"/> '
+' </imgSource> '
+' <showDataEffect> '
+' <SeriesSlide duration="1000" direction="up"/> '
+' </showDataEffect> '
+' </ImageSeries> '
+' </series> '
+' <verticalAxisRenderers> '
+' <Axis2DRenderer axis="{vAxis}" visible="false"/> '
+' </verticalAxisRenderers> '
+' </ImageChart> '
+'</rMateChart> '
//차트 데이터
// chartData = [{"Year":2006,"Data1":1500},
// {"Year":2007,"Data1":1000},
// {"Year":2008,"Data1":1400},
// {"Year":2009,"Data1":1500},
// {"Year":2010,"Data1":1900},
// {"Year":2011,"Data1":1400},
// {"Year":2012,"Data1":1000},
// {"Year":2013,"Data1":1400}];
return layoutStr;
}
function makeLineMultiDualChart(chartId, categoryField, yField, dual, displayName, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr =
'<rMateChart cornerRadius="12" backgroundColor="0xffffff" borderStyle="none">'
+'<Options>'
+'<SubCaption text="'+unit+'" textAlign="right" />' //단위
+'<Legend defaultMouseOverAction="false" useVisibleCheck="true"/>'
+'</Options>'
+'<NumberFormatter id="numFmt" precision="0"/>'
+'<Line2DChart showDataTips="true" dataTipDisplayMode="axis" paddingTop="0">'
+'<horizontalAxis>'
+'<CategoryAxis categoryField="'+ categoryField +'"/>'
+'</horizontalAxis>'
+'<verticalAxis>'
+'<LinearAxis />'
+'</verticalAxis>'
+'<series>';
for(var i = 0 ; i < yField.length ; i++){
/*
itemRenderer는 Tip이 보여지는 영역차트 부분에 ItemRenderer에서 제공하는 모양을 그려줍니다
이 예제에서는 Diamond입니다
사용할 수 있는 도형을 모두 표현한 예제는 Chart Samples 의 범례 예제를 참고하십시오.
*/
/* 아이템렌더러(데이터 마커) 테두리 색상 */
if(i < (yField.length-1)){
layoutStr += '<Line2DSeries labelPosition="up" yField="'+yField[i]+'" displayName="'+displayName[i]+'" form="segment" lineStyle="dashLine" dashLinePattern="2" itemRenderer="RectangleItemRenderer" radius="6" >'
+'<verticalAxis>'
+' <LinearAxis id="vAxis'+(i+1)+'" />'
+'</verticalAxis>';
}else{
layoutStr += '<Line2DSeries labelPosition="up" yField="'+yField[i]+'" displayName="'+displayName[i]+'" verticalAxis="{vAxis1}" form="segment" lineStyle="dashLine" dashLinePattern="2" itemRenderer="RectangleItemRenderer" radius="6" >'
}
layoutStr += '<showDataEffect>'
+'<SeriesInterpolate/>'
+'</showDataEffect>'
+'</Line2DSeries>';
}
layoutStr += '</series>';
layoutStr += ' <verticalAxisRenderers>'
for(var i = 0 ; i < dual.length ; i++){
layoutStr += ' <Axis2DRenderer axis="{vAxis'+(i+1)+'}" placement="'+dual[i]+'"/>';
}
layoutStr += ' </verticalAxisRenderers>';
layoutStr += '<annotationElements>'
+'<CrossRangeZoomer zoomType="horizontal" fontSize="11" color="0xFFFFFF" horizontalLabelFormatter="{numFmt}" verticalLabelPlacement="bottom" horizontalLabelPlacement="left" enableZooming="false" enableCrossHair="true" backgroundColor="0xeb494a" borderColor="0xeb494a">'
+'</CrossRangeZoomer>'
+'</annotationElements>'
+'</Line2DChart>'
+'</rMateChart>';
//차트 데이터
return layoutStr;
}
function makeLineMultiDualChart2(chartId, categoryField, yField, dual, displayName, chartData,unit){
if( unit == null || unit == "" ){
unit ="";
}
var layoutStr =
'<rMateChart cornerRadius="12" backgroundColor="0xffffff" borderStyle="none">'
+'<Options>'
+'<SubCaption text="'+unit+'" textAlign="right" />' //단위
+'<Legend defaultMouseOverAction="false" useVisibleCheck="true"/>'
+'</Options>'
+'<NumberFormatter id="numFmt" precision="0"/>'
+'<Line2DChart showDataTips="true" dataTipDisplayMode="axis" paddingTop="0">'
+'<horizontalAxis>'
+'<CategoryAxis categoryField="'+ categoryField +'"/>'
+'</horizontalAxis>'
+'<verticalAxis>'
+'<LinearAxis />'
+'</verticalAxis>'
+'<series>';
for(var i = 0 ; i < yField.length ; i++){
/*
itemRenderer는 Tip이 보여지는 영역차트 부분에 ItemRenderer에서 제공하는 모양을 그려줍니다
이 예제에서는 Diamond입니다
사용할 수 있는 도형을 모두 표현한 예제는 Chart Samples 의 범례 예제를 참고하십시오.
*/
/* 아이템렌더러(데이터 마커) 테두리 색상 */
if(i < (yField.length-1)){
layoutStr += '<Line2DSeries labelPosition="up" yField="'+yField[i]+'" displayName="'+yField[i]+'" form="segment" lineStyle="dashLine" dashLinePattern="2" itemRenderer="RectangleItemRenderer" radius="6" >'
+'<verticalAxis>'
+' <LinearAxis id="vAxis'+(i+1)+'" formatter="{fmt}"/>'
+'</verticalAxis>';
}else{
layoutStr += '<Line2DSeries labelPosition="up" yField="'+yField[i]+'" displayName="'+yField[i]+'" verticalAxis="{vAxis1}" form="segment" lineStyle="dashLine" dashLinePattern="2" itemRenderer="RectangleItemRenderer" radius="6" >'
}
layoutStr += '<showDataEffect>'
+'<SeriesInterpolate/>'
+'</showDataEffect>'
+'</Line2DSeries>';
}
layoutStr += '</series>';
layoutStr += ' <verticalAxisRenderers>'
for(var i = 0 ; i < dual.length ; i++){
layoutStr += ' <Axis2DRenderer axis="{vAxis'+(i+1)+'}" placement="'+dual[i]+'"/>';
}
layoutStr += ' </verticalAxisRenderers>';
layoutStr += '<annotationElements>'
+'<CrossRangeZoomer zoomType="horizontal" fontSize="11" color="0xFFFFFF" horizontalLabelFormatter="{numFmt}" verticalLabelPlacement="bottom" horizontalLabelPlacement="left" enableZooming="false" enableCrossHair="true" backgroundColor="0xeb494a" borderColor="0xeb494a">'
+'</CrossRangeZoomer>'
+'</annotationElements>'
+'</Line2DChart>'
+'</rMateChart>';
//차트 데이터
return layoutStr;
}
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix = "fn" uri = "http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><spring:message code="code.m00637" /></title>
<c:import url="/WEB-INF/jsp/chart/comRmateChart.jsp" charEncoding="utf-8" />
<script type="text/javascript">
var title12 = "맵차트";
var subTitle12 = "fn_makeMapChart";
var chartId12 = "chartId12";
var divId12 = "chartHolder12";
var layoutStr;
var layoutStr1;
var layoutStr2;
var paramSchlDivCd ="";
/*범례*/
var legndArr51 =[20,35,50];
var legndArr45 =[2500,3000,3500];
var legndArr29 =[21,24,27,30];
var legndArr28 =[21,24,27,30];
var legndArr38 =[5000,6000,7000];
var legndArr39 =[13000,14000,15000];
var legndArr40 =[13000,14000,15000];
var legndArr43 =[54,60,66];
var legndArr20 =[3000,6000,9000];
var legndArr27 =[40,45,50];
var legndArr4 =[11,22,33];
$(document).ready(function() {
//rMateMapChartH5.create(chartId12, divId12, "", "100%", "100%");
/* fn_select_chart(); */
fn_selectComboBox("item");
fn_selectComboBox("schlType" ,true);
$( "#schl_div_cd" ).selectmenu({ change: function( event, ui ) {
fn_selectComboBox("item");
fn_selectComboBox("schlType");
}});
$( "#svy_yr" ).selectmenu({ change: function( event, ui ) {
fn_selectComboBox("item");
fn_selectComboBox("schlType");
}});
$("#label_schlZone_all").change(function() {
var checkYN=$(this).prop("checked");
$(".schlZoneClass").prop( "checked" ,checkYN);
$(".schlZoneClass").prop( "disabled" ,checkYN);
});
//검색버튼 클릭시 조회 이벤트
$("#search").click(function(){
// if( !loading ){
// //맵차트 오브젝트가 생성되기 전에 조회를 누르면 에러가 발생하기 때문에 막아놓는다.
// alert("잠시만 기다려주십시오.");
// return;
// }
// if(fvProgressBarStatus == false){
// $("#ProgressBx").show();
// fn_progressBar("Progress", 50, 2);
// }else if(fvProgressBarStatus == true){
// alert("조회 중입니다. 잠시만 기다려주십시오.");
// return false;
// }
// $("#noneChart").css("display", "none");
//아래의 $("#mapChart").css("width", "0px"); 이런형태로 쓰게 되면 맵차트에 에러가 발생한다.
//display none block 도 마찬가지로 에러발생.
//$("#mapChart").css("width", "0px");
//$("#mapChart").css("height", "0px");
//1px을 안주고 0px을 주면 에러 발생. 1px 을 주어야 한다.
// document.getElementById("mapChart").style.width="1px";
// document.getElementById("mapChart").style.height="1px";
// if(document.getElementById("map3").nodeName != "OBJECT"){
// document.getElementById("map3").resize();
// }
var obj =$("input:checkbox[name=schlZone]:checked");
if( obj.length == 1 ){
clickTd($(obj).val() ,$(obj).data("nm"));
}else{
fn_select_chart1();
}
});
});
function fn_select_chart1(){
var trUrl = "selectItemGrp.do";
var sucess = true;
$("#chart_gb").val("st1");
$("#st2").hide();
if ( $(".itemClass:checked").length == 0 ){
return;
}
gfn_Submission_Call("/pubinfo/pubinfo0360/"+trUrl, $("#frm").serialize(), function(data){
if(data != null){
// 공통 에러 메시지 처리
if( data.M_CODE < 0 ){
alert(data.M_RTME);
sucess = false;
}else{
chartData1 = data.resultList;
avgData1 = data.resultList2;
paramSchlDivCd =data.pramMap.schl_div_cd;
searchChart1("column1");
}
}
},'json');
}
function fn_selectComboBox(type){
$("#comboType").val(type);
//지표조회
gfn_Submission_Call("/pubinfo/pubinfo0360/selectComboBox.do", $("#frm").serialize(), function(data){
if(data != null){
// 공통 에러 메시지 처리
if( data.M_CODE < 0 ){
alert(data.M_RTME);
}else{
$("#"+type).empty();
var optionStr="";
var inputType= (type == "schlType") ? "checkbox":"radio" ;
$("#"+type).empty();
$.each( data.resultList, function( i, obj ){
optionStr='';
if( i == 0 && type == "schlType"){
optionStr+='<span class="radio-check-wrap">';
optionStr+=' <input id="label_schlType_all" name="label_schlType_all" type="checkbox" value="" >';
optionStr+=' <label for="label_schlType_all"><spring:message code="code.m00595" /></label>';<%--전체--%>
optionStr+=' </span>';
}
var dataStr="";
if( type == "item" ){
var checked= ( i == 0) ? "checked='checked'":"" ;
dataStr='data-idx_rmk_ctnt="'+obj.idx_rmk_ctnt+'"'
+'data-pbnf_era_cd="'+obj.pbnf_era_cd+'"'
+'data-idx_calf_expl_ctnt ="'+obj.idx_calf_expl_ctnt+'"'
+'data-item_id ="'+obj.item_id+'"'
+'data-nm="'+obj.nm+'"'+checked;
}
optionStr+='<span class="radio-check-wrap">';
optionStr+= '<input id="label_'+type+'_'+i+'" name="'+type+'" type="'+inputType+'" value="'+obj.cd+'" class="'+type+'Class" '+dataStr+'>';
optionStr+= '<label for="label_'+type+'_'+i+'">'+obj.nm+'</label>';
optionStr+='</span>';
$("#"+type).append(optionStr);
});
if( type == "schlType"){
$("#label_schlType_all").change(function() {
var checkYN=$(this).prop("checked");
$(".schlTypeClass").prop( "checked" ,checkYN);
$(".schlTypeClass").prop( "disabled" ,checkYN);
});
}else{
fn_select_chart1();
}
}
}
},'json');
}
var nm ="";
var unit ="";
var chart1 = "chart1";
var divId1 = "chartHolder1";
var chart1CreateYN = true ;
var chart2 = "chart2";
var divId2 = "chartHolder2";
var chart2CreateYN = true;
//=복사=======================================================================================
/*차트 아이콘을 클릭할때마다 데이터를 조회해 오는건 비효율적이므로 자바스크립트 전역변수를 선언해서
조회시에 가져온 데이터를 담아두고 쓴다.
조회조건을 전역변수로 선언해 놓은 이유는 위의 검색조건이 선택되어 있는 값에 따라서 데이터 조회를 하면
중간에 검색조건을 바꾸게 될 경우 위는 1번 지표로 아래는 2번지표로 검색되는 상황이 생길수 있으므로
검색버튼을 클릭할때 조건을 담아두고 사용한다.
*/
var schl_nm = ""; //학교이름
var paramSchlDivCd = "";
var paramSvyYr = "";
var paramSchKind = "";
var paramSchlEstab = "";
var paramIndexId = "";
var paramTitle = "";
var paramaa_cd = "";
var paramRmk = "";
var chartData1 = ""; //1번 차트 검색시 data
var avgData1 = "";//1번차트 검색시 avg
var chartData2 = ""; //2번 차트 검색시 data
var avgData2 = "";//2번차트 검색시 avg
var loading = false;
//맵차트는 젤아래부분에 생성했음. 리아모어 직원이 생성 위치를 수정했고 이유는 모름.
//rMateMapChartH5.create("map3", "mapChart", "dataType=json", "100%", "100%");
//맵차트의 템플릿
var mapDataBaseURL = "/resources/chart/xml/SouthKoreaMig.xml";
var sourceURL = "/resources/chart/svg/SouthKorea.svg";
//첫번째 차트조회
function searchChart1(chartKind){
if( chartData1.length > 0 ){
nm = $("input[name='item']:checked").data("nm");
unit = $("input[name='item']:checked").data("idx_rmk_ctnt");
$(".st1").show();
$("#st1-name").html(nm+'('+unit+')');
var subTitle = "";
var categoryField = "aa_ne";
var displayName = "";
var dataTipVisible = false;
var averageTitle = "";
var chartId = "chart1";
var precision = "2";
var legendClick = false;
var legendVisible = true;
var groupId = ["val"];
var itemRenderer = "CircleItemRenderer";
var legendPosition = "";
var color = "#e31e1e";
$("#excelDown1").css("display", "block");
$("#table1").css("display", "block");
$("#table1").html("");
//11
var htmlVal = "";
htmlVal = makeTable(avgData1, chartData1, "1");
$("#table1").html(htmlVal);
var formulaBoxSpan='<span class="desc">'+$(".itemClass:checked").data("idx_calf_expl_ctnt")+'</span>';
$("#formula").html(formulaBoxSpan);
layoutStr1= makeBarChartClick(chart1, 'aa_ne', 'val', chartData1,"clickChart1",'( <spring:message code="code.m00262"/>: '+$(".itemClass:checked").data("idx_rmk_ctnt")+' )');
if( chart1CreateYN ){
rMateChartH5.create(chart1, divId1, "rMateOnLoadCallFunction=chartReadyHandler1", "100%", "100%");
layoutStr=fn_makeMapChart();
rMateMapChartH5.create("map3", "mapChart", "rMateOnLoadCallFunction=chartReadyHandlerMap", "100%", "100%");
chart1CreateYN = false;
}else{
chartReadyHandler1(chart1);
if( $("input[name=schlZone]:checkbox:checked").length == 0 ){
layoutStr=fn_makeMapChart();
chartReadyHandlerMap("map3");
}
}
// var height = ( $("#srch_div").height()-26 )+"px" ;
// document.getElementById("mapChart").style.width="686px";
// document.getElementById("mapChart").style.height=height;
// document.getElementById("mapChart").style.height=height;
// document.getElementById("graph-box-map").style.height=height;
// if(document.getElementById("map3").nodeName != "OBJECT"){
// document.getElementById("map3").resize();
// }
// //위와 아래 두군데에 동일하게 높이를 생성하는건 맵차트가 플래쉬로 생성된경우에
// //두번의 높이설정을 해야 문제가 없다고 리아모어 직원이 말해서 두번을 넣었음.
// // ie8에서 안넣으면 문제가 된다고 함.
// document.getElementById("mapChart").style.height=height ;
// document.getElementById("mapChart").style.height=height;
// document.getElementById("graph-box-map").style.height=height;
// $("#chartIcon1").css("display", "block");
}
}
//데이터 조회시 동적 테이블 생성
function makeTable(avgData, chartData, gubun){
var htmlVal = "";
var itemId= $(".itemClass:checked").data("item_id");
var val =$(".itemClass:checked").val();
var addNumUnit = val== '4' ? ':1':'';
nm = $("input[name='item']:checked").data("nm");
unit = $("input[name='item']:checked").data("idx_rmk_ctnt");
htmlVal += '<table class="tbl-col over-bg" id="table_'+gubun+'">';
if( gubun == "1" ){
htmlVal += '<colgroup><col style="width: 123px;" /><col style="auto" /></colgroup>';
}else{
htmlVal += '<colgroup><col width="200px" /><col width="*" /></colgroup>';
}
htmlVal += '<tr><th scope="col" ><spring:message code="code.m00199" /></th><th scope="col">'+nm+"("+unit+")"+'</th></tr>'; //구분
htmlVal += '<tr class="bg-gray-row"><td><spring:message code="code.m20003" /></td><td>'+comma(avgData[0].minval) +addNumUnit+'</td></tr>'; //최소
htmlVal += '<tr class="bg-gray-row"><td><spring:message code="code.m20004" /></td><td>'+comma(avgData[0].maxval) +addNumUnit+'</td></tr>'; //최대
htmlVal += '<tr class="bg-gray-row"><td><spring:message code="code.m20006" /></td><td>'+comma(avgData[0].avgval) +addNumUnit+'</td></tr>'; //평균
htmlVal += '<tr class="bg-gray-row"><td><spring:message code="code.m20005" /></td><td>'+comma(avgData[0].stddevval) +addNumUnit+'</td></tr>'; //표준편차
for(var i = 0 ; i < chartData.length ; i++){
if( gubun == "1" ){
htmlVal += '<tr><td><a href="#none" onclick="clickTd(\''+chartData[i].aa_cd+'\',\''+chartData[i].aa_ne+'\');" >'+chartData[i].aa_ne+'</a></td><td>'+comma(chartData[i].val) +addNumUnit+'</td></tr>';
}else{
htmlVal += '<tr class="pnt"><td><a href="#none" onclick="gnf_go_schl_detail(\''+chartData[i].sl_cd+'\',\'compt\');" >'+chartData[i].sl_ne+'</a></td><td>'+comma(chartData[i].val)+addNumUnit +'</td></tr>';
}
}
htmlVal += '</table>';
htmlVal += fn_writeTableLabel(itemId);
return htmlVal;
}
// 스크롤 이동
function fnMove(){
var offset = $("#st2-name").offset();
$('html, body').animate({scrollTop : offset.top}, 400);
}
//jsp 에서 천단위 콤마 달아줌.
function comma(str) {
if( str == null ){
return "0";
}
var parts = str.toString().split(".");
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return parts.join(".");
}
//지역별 테이블 클릭시
function clickTd(data1, data2){
var val = {"aa_cd": data1, "aa_ne":data2};
clickChart1("", "", "", val, "");
}
//첫번째 차트 클릭시 두번째 차트와 테이블 데이터 조회
function clickChart1(seriesId, displayText, index, paramData, values){
$(".st1").hide();
var trUrl = "selectItemGrp.do";
var sucess = true;
$("#chart_gb").val("st2");
$("#st2SchlZone").val( paramData.aa_cd );
$("#st2SchlZoneName").val( paramData.aa_ne );
nm = $("input[name='item']:checked").data("nm");
unit = $("input[name='item']:checked").data("idx_rmk_ctnt");
gfn_Submission_Call("/pubinfo/pubinfo0360/"+trUrl, $("#frm").serialize(), function(data){
if(data != null){
// 공통 에러 메시지 처리
if( data.M_CODE < 0 ){
alert(data.M_RTME);
sucess = false;
}else{
chartData2 = data.resultList;
avgData2 = data.resultList2;
if( chartData2 != null && chartData2.length > 0 ){
$("#st2-name").html(paramData.aa_ne+" "+nm+"("+unit+")");
$("#st2").show();
searchChart2("column1");
}
fnMove(); // 차트로 이동
}
}
},'json');
}
//2번차트 & 테이블 세팅
function searchChart2( chartKind){
if( chartData2.length > 0 ){
var htmlVal = "";
htmlVal = makeTable(avgData2, chartData2, "2");
$("#table2").html(htmlVal);
var height=$("#table2").height()+"px";
document.getElementById(divId2).style.height=height;
$("#"+divId2).show();
layoutStr2= makeBarChart( chart2, 'sl_ne', 'val', null,'( <spring:message code="code.m00262"/>: '+$(".itemClass:checked").data("idx_rmk_ctnt")+' )');
if( chart2CreateYN ){
//chartId, categoryField, yField, chartData
$("#"+chart2).height ( $("#table2").height() );
rMateChartH5.create(chart2, divId2, "rMateOnLoadCallFunction=chartReadyHandler2", "100%", "100%");
chart2CreateYN = false;
}else{
chartReadyHandler2(chart2);
document.getElementById(chart2).resize();
}
// if(document.getElementById(chart2).nodeName != "OBJECT"){
// document.getElementById(chart2).resize();
// }
}
}
function dataTipFunction(seriesId, code, label, data) {
return data.val+unit;
}
//엑셀다운
function downExcel(depth){
var frm = document.listForm;
frm.action = "<c:url value='/uipnh/unt/ipsrch/UntZnAcdtSttstSrchItemExcel.do'/>";
var condi1 = fn_condition_checkbox("sch_kind");
var condi2 = fn_condition_checkbox("schl_estab");
frm.paramSvyYr.value = paramSvyYr;
frm.paramSchlDivCd.value = paramSchlDivCd;
// frm.paramSchKind.value = paramSchKind;
// frm.paramSchlEstab.value = paramSchlEstab;
frm.paramSchlKindCd.value = condi1;
frm.paramSchlEstabCd.value = condi2;
frm.paramIndexId.value = paramIndexId[0];
frm.paramItemId.value = paramIndexId[1];
frm.paramaa_cd.value = paramaa_cd;
frm.paramDepth.value = depth;
frm.paramItemNm.value = paramTitle;
frm.submit();
return true;
}
//맵차트 색표현
function colorFunction(code, label, data) {
var val =$(".itemClass:checked").val();
var legndArr = eval('legndArr'+val);
if( data !=null && data!= undefined && Number(legndArr[2]) != 0 && data.val != null ){
if (Number(data.val) < Number(legndArr[0])){
return "0x817dcd";
}else if ( Number(data.val) < Number(legndArr[1])){
return "0x7fbaf1";
}else if ( Number(data.val) < Number(legndArr[2])){
return "0xf06eaa";
}else{
return "0xffcc00";
}
}else{
return "0x7fbaf1";
}
}
//맵차트 클릭펑션
function clickFunction(code, label, data) {
clickChart1("", "", "", data, "");
}
function fn_makeMapChart(){
var val =$(".itemClass:checked").val();
var legndArr = eval('legndArr'+val);
var layoutURL = '<rMateMapChart>';
layoutURL+= '<MapChart id="mainMap" mapChangeJsFunction="clickFunction" drillDownEnabled="false" showDataTips="false" showDataTipTargets="false" gutterTop="15" gutterBottom="15" >';
layoutURL += ' <series> ';
layoutURL += ' <MapSeries id="mapseries" hideOverSizeLabel="false" selectionMarking="color" selectionMarkLineColor="#758d99" rollOverFilter="true" localFill="#ebf0f4" localFillJsFunction="colorFunction"> ';
layoutURL += ' <filters> ';
layoutURL += ' <DropShadowFilter distance="5" angle="90" color="#888888" blur="0"/> ';
layoutURL += ' </filters> ';
layoutURL += ' <showDataEffect> ';
layoutURL += ' <SeriesInterpolate duration="1000"/> ';
layoutURL += ' </showDataEffect> ';
// layoutURL += ' <selectionFill> ';
// layoutURL += ' <SolidColor color="#6fbe57"/> ';
// layoutURL += ' </selectionFill> ';
layoutURL += ' <rollOverFill> ';
layoutURL += ' <SolidColor color="#6fbe57"/> ';
layoutURL += ' </rollOverFill> ';
layoutURL += ' <rollOverStroke> ';
layoutURL += ' <Stroke color="#6fbe57" weight="0.25" alpha="0.25"/> ';
layoutURL += ' </rollOverStroke> ';
layoutURL += ' <stroke> ';
layoutURL += ' <Stroke color="#CAD7E0" weight="0.8" alpha="1"/> ';
layoutURL += ' </stroke> ';
layoutURL += ' </MapSeries> ';
layoutURL += ' <MapPanelSeries id="panel1" titleField="aa_ne" bodyTextField="val" bodyColor="#555555" color="#FFFFFF" horizontalAlign="center" displayName="날씨" itemRenderer="PTPanelItemRenderer" fill="#2e7dca" panelWidth="50" headerHeight="20" panelHeight="20" strokeColor="#0BFF91" rollOverFillShadeValue="10" horizontalCenterGapField="h" verticalCenterGapField="v">';
layoutURL += ' <showDataEffect>';
layoutURL += ' <SeriesInterpolate duration="1000"/>';
layoutURL += ' </showDataEffect>';
layoutURL += ' </MapPanelSeries>';
layoutURL += ' </series> ';
layoutURL += ' </MapChart> ';
layoutURL+= '<Box width="100%" horizontalAlign="center" paddingTop="20">';
layoutURL+= '<SubLegend borderStyle="solid" borderColor="0x999999" backgroundColor="0xFFFFFF">';
if( legndArr.length > 2 ){
layoutURL+= '<LegendItem label="'+comma(legndArr[0])+'<spring:message code="code.m30393"/>">';//이하
layoutURL+= '<fill>';
layoutURL+= '<SolidColor color="0x817dcd"/>';
layoutURL+= '</fill>';
layoutURL+= '</LegendItem>';
layoutURL+= '<LegendItem label="'+comma(legndArr[1])+'<spring:message code="code.m30393"/>">';//이하
layoutURL+= '<fill>';
layoutURL+= '<SolidColor color="0x7fbaf1"/>';
layoutURL+= '</fill>';
layoutURL+= '</LegendItem>';
layoutURL+= '<LegendItem label="'+comma(legndArr[2])+'<spring:message code="code.m30393"/>">'; //이하
layoutURL+= '<fill>';
layoutURL+= '<SolidColor color="0xf06eaa"/>';
layoutURL+= '</fill>';
layoutURL+= '</LegendItem>';
layoutURL+= '<LegendItem label="'+comma(legndArr[2])+'<spring:message code="code.m30392"/>">'; //이상
layoutURL+= '<fill>';
layoutURL+= '<SolidColor color="0xffcc00"/>';
layoutURL+= '</fill>';
layoutURL+= '</LegendItem>';
}else{
layoutURL+= '<LegendItem label="'+legndArr[0]+'<spring:message code="code.m30393"/>">';//이하
layoutURL+= '<fill>';
layoutURL+= '<SolidColor color="0x7fbaf1"/>';
layoutURL+= '</fill>';
layoutURL+= '</LegendItem>';
}
layoutURL+= '</SubLegend>';
layoutURL+= '</Box>';
layoutURL+= '</rMateMapChart>';
return layoutURL;
}
function saveToExcel(chart_gb){
$("#chart_gb").val(chart_gb);
$("#excelNm").val(nm);
$("#frm").attr("action","/pubinfo/pubinfo0360/excelDownLoad.do");
$("#frm").attr("onsubmit","true");
$("#frm").submit();
}
function chartReadyHandlerMap(id) {
/* {sd_yr: "2018", aa_cd: "23", aa_ne: "인천", code: "23", val: 12.5,v:25, h: -15}
,{sd_yr: "2018", aa_cd: "41", aa_ne: "경기", code: "41", val: 11.2, v:20,h:30}
,{sd_yr: "2018", aa_cd: "43", aa_ne: "충북", code: "43", val: 7,v:-20}
, {sd_yr: "2018", aa_cd: "44", aa_ne: "충남", code: "44", val: 7.8,v:-30, h: -15} */
for(var i=0 ; i<chartData1.length ; i++){
var obj= chartData1[i];
if( obj.code == '23' || obj.code == '41' || obj.code == '43' || obj.code == '44'){
if(obj.code == '23'){
obj.v='25';
obj.h='-15';
}else if(obj.code == '41'){
obj.v='20';
obj.h='30';
}else if(obj.code == '43'){
obj.v='-20';
}else if(obj.code == '44'){
obj.v='-30';
obj.h='-15';
}
chartData1[i] =obj;
}
}
document.getElementById(id).setLayout(layoutStr);
document.getElementById(id).setData(chartData1);
document.getElementById(id).setMapDataBaseURLEx(mapDataBaseURL);
document.getElementById(id).setSourceURLEx(sourceURL);
}
function chartReadyHandler1(id) {
var rechartDate = [];
for( var t= chartData1.length-1; t >= 0 ; t--){
rechartDate.push(chartData1[t]);
}
document.getElementById(id).setLayout(layoutStr1);
document.getElementById(id).setData(rechartDate);
}
function chartReadyHandler2(id) {
var rechartDate = [];
for( var t= chartData2.length-1; t >= 0 ; t--){
rechartDate.push(chartData2[t]);
}
document.getElementById(id).setLayout(layoutStr2);
document.getElementById(id).setData(rechartDate);
var chartHolder = document.getElementById(divId2).parentNode;
chartHolder.style.height = $("#table2").height() +"px";
//document.getElementById(divId2).resize();
}
function fn_writeTableLabel(itemId){
var date ="";
var html ="";
if( paramSchlDivCd == "02"){ //대학교
if( itemId =="153" ) date="<spring:message code="code.m00878" />";
if( itemId =="157" ) date="<spring:message code="code.m20117" />";
if( itemId =="52" ) date="<spring:message code="code.m00893" />";
if( itemId =="27" ) date="<spring:message code="code.m00902" />";
if( itemId =="140" ) date="<spring:message code="code.m20119" />";
if( itemId =="141" ) date="<spring:message code="code.m20119" />";
if( itemId =="129" ) date="<spring:message code="code.m20118" />";
if( itemId =="33" ) date="<spring:message code="code.m00893" />";
if( itemId =="193" ) date="<spring:message code="code.m20116" />";
if( itemId =="46" ) date="<spring:message code="code.m20120" />";
}else if( paramSchlDivCd == "01" ){ //전문대학
if( itemId =="153" ) date="<spring:message code="code.m00914" />";
if( itemId =="157" ) date="<spring:message code="code.m20117" />";
if( itemId =="52" ) date="<spring:message code="code.m00893" />";
if( itemId =="27" ) date="<spring:message code="code.m00902" />";
if( itemId =="140" ) date="<spring:message code="code.m20119" />";
if( itemId =="141" ) date="<spring:message code="code.m20119" />";
if( itemId =="129" ) date="<spring:message code="code.m20118" />";
if( itemId =="33" ) date="<spring:message code="code.m00893" />";
if( itemId =="193" ) date="<spring:message code="code.m20116" />";
if( itemId =="46" ) date="<spring:message code="code.m20120" />";
}else if( paramSchlDivCd == "04" ){ //대학원대학
if( itemId =="153" ) date="<spring:message code="code.m00878" />";
if( itemId =="157" ) date="<spring:message code="code.m20117" />";
if( itemId =="52" ) date="<spring:message code="code.m00893" />";
if( itemId =="27" ) date="<spring:message code="code.m00877" />";
if( itemId =="140" ) date="<spring:message code="code.m20119" />";
if( itemId =="141" ) date="<spring:message code="code.m20119" />";
if( itemId =="129" ) date="<spring:message code="code.m20118" />";
if( itemId =="33" ) date="<spring:message code="code.m00893" />";
if( itemId =="193" ) date="<spring:message code="code.m20116" />";
if( itemId =="46" ) date="<spring:message code="code.m20120" />";
}
if( date != ""){
html='<ul class="tbl-desc-list">'
+ '<li><spring:message code="code.m00515"/> : '+date+'</li>'//자료기준일
+'</ul>';
}
return html;
}
//전체보기
function fn_all_data(){
if($("input:checkbox[name=schlZone]:checked").length == 1){
$(".schlZoneClass").prop( "checked" ,false);
fn_select_chart1();
}else{
$(".st1").show();
$("#st2").hide();
}
}
</script>
</head>
<body>
<div class="contents-inner-wrap">
<form:form commandName="pramMap" id="frm" name="frm" method="post" onsubmit="return false;">
<input type="hidden" id="comboType" name="comboType" value="" />
<input type="hidden" id="st2SchlZone" name="st2SchlZone" value="" />
<input type="hidden" id="st2SchlZoneName" name="st2SchlZoneName" value="" />
<input type="hidden" id="excelNm" name="excelNm" value="" />
<input type="hidden" id="chart_gb" name="chart_gb" value="" />
<div class="inner-wrap">
<h2 class="page-title"><spring:message code="code.m00637" /></h4><%--지역별 정보 --%>
<div class="graph-tbl-box">
<div class="flex-box">
<div class="flex-box-inner width-auto">
<div class="map-graph-wrap" style="width:688px">
<div class="graph-box" style="width:686px;height:871px;" id="graph-box-map">
<!-- <div style="height:100%; background: rgba(255, 0, 0, 0.4)">
그래프 영역(704x616, div 삭제 필요)
</div> -->
<div id="mapChart" style="width:686px;height:871px;" ></div>
</div>
</div>
<ul class="graph-desc-list">
<%-- <spring:message code="code.m00017" /> --%>
<li class="bullet-dash"><spring:message code="code.m20007" /></li><%--보다 정확한 정보공시를 위하여, 일부 대학의 데이터 값이 수정될 수 있으며, 수정 중인 대학의 정보는 검색에서 제외될 수 있습니다. --%>
<li class="bullet-dash"><spring:message code="code.m20008" /></li><%--지역별통계에서 캠퍼스의 데이터는 본교에 합산되어 표기됩니다. --%>
<%-- <li class="bullet-dash"><spring:message code="code.m20009" /></li>공시 일정이 도래하지 않아 공개되지 않은 정보는 일부 검색되지 않을 수 있습니다.
<li class="bullet-dash"><spring:message code="code.m20010" /></li>[소개>공시항목 및 일정]의 시기별 공시항목을 참고하여 주십시오. --%>
</ul>
</div>
<div class="flex-box-inner">
<div class="tbl-desc-wrap">
<h4 class="content-title"><spring:message code="code.m00387" /></h4><%--상세검색 --%>
</div>
<div class="tbl-wrap graph-search-box" id="srch_div">
<table class="tbl-row">
<caption>상세검색 목록 테이블</caption>
<colgroup>
<col style="width:120px;">
<col style="width:auto;">
</colgroup>
<tbody>
<tr>
<th scope="row"><spring:message code="code.m00112" /></th><%--공시연도 --%>
<td>
<span class="ui-select-wrap">
<select class="ui-select" data-width="214" name="svy_yr" id="svy_yr">
<c:forEach items="${svyYrList}" varStatus="status" var="obj">
<!-- 2019.04.30 임시로 주석처리
<option value="${obj.cdid }" <c:if test="${obj.chk_yr eq obj.cdnm }">selected="selected"</c:if> >${obj.cdnm }</option> -->
<option value="${obj.cdid }">${obj.cdnm }</option>
</c:forEach>
</select>
</span>
</td>
</tr>
<tr>
<th scope="row"><spring:message code="code.m00739" /></th><%--학교종류 --%>
<td>
<span class="ui-select-wrap">
<select class="ui-select" data-width="214" name="schl_div_cd" id="schl_div_cd" >
<c:forEach items="${schlkndList}" varStatus="status" var="obj">
<c:if test="${obj.cd ne '03'}">
<option value="${obj.cd }">${obj.nm }</option>
</c:if>
</c:forEach>
</select>
</span>
</td>
</tr>
<tr>
<th scope="row"><spring:message code="code.m00738" /></th><%--학교유형 --%>
<td id="schlType">
<span class="radio-check-wrap">
<input id="label_schlType_all" name="label_schlType_all" type="checkbox" value="" >
<label for="label_schlType_all"><spring:message code="code.m00595" /></label><%--전체 --%>
</span>
<c:forEach items="${schlTypeList}" varStatus="status" var="obj">
<span class="radio-check-wrap">
<input id="label_schlType_${status.index}" name="schlType" type="checkbox" value="${obj.cd }" class="schlTypeClass">
<label for="label_schlType_${status.index}">${obj.nm }</label>
</span>
</c:forEach>
</td>
</tr>
<tr>
<th scope="row"><spring:message code="code.m00636" /></th><%--지역 --%>
<td>
<span class="radio-check-wrap">
<input id="label_schlZone_all" name="label_schlType_all" type="checkbox" value="" >
<label for="label_schlZone_all"><spring:message code="code.m00595" /></label><%--전체 --%>
</span>
<c:forEach items="${areaList}" varStatus="status" var="obj">
<span class="radio-check-wrap">
<input id="label_schlZone_${status.index}" name="schlZone" type="checkbox" value="${obj.cd }" class="schlZoneClass" data-nm="${obj.nm }">
<label for="label_schlZone_${status.index}">${obj.nm }</label>
</span>
</c:forEach>
</td>
</tr>
<tr>
<th scope="row"><spring:message code="code.m00627" /></th><!-- 주요지표 -->
<td id="item"></td>
</tr>
</tbody>
</table>
<div class="btn-wrap text-right">
<button type="button" class="btn btn-md btn-primary-bg" id="search"><spring:message code="code.m00073" /></button><%--검색 --%>
</div>
</div>
</div>
</div>
</div>
<h3 class="section-title st1" style="display:none">
<span id="st1-name"></span>
<button type="button" class="btn icon-excel" onclick="saveToExcel('st1')"><spring:message code="code.m00440" /></button>
</h3><%--엑셀 다운로드 --%>
<div class="graph-tbl-box bar-graph st1" style="display:none">
<div class="flex-box">
<div class="flex-box-inner width-auto">
<div class="bar-graph-wrap">
<div class="graph-box" >
<div id="chartHolder1" style="width: 530px;height:712px; "></div>
</div>
</div>
<c:if test="${ pramMap.COLUMLAUNG eq 'KOR' }">
<div class="formula-box">
<span class="formula-inner" id="formula">
<!-- <span class="desc">전체학과 (학과별 학년별 등록금 x 학과별 학년별 정원내입학정원)의 합</span>
<br>
<span class="desc">전체 정원내 입학정원의 합</span> -->
</span>
</div>
</c:if>
</div>
<div class="flex-box-inner">
<div class="tbl-wrap graph-search-box" id="table1">
</div>
</div>
</div>
</div>
<!-- S : 지역 클릭시 노출되는 지역별 대학목록 영역 -->
<div class="colleage-result-list" id="st2" style="display:none;">
<h3 class="section-title">
<span id="st2-name"><!-- 부산 대학별 비전임교원 강의담당비율 (%) --></span>
<span class="right-wrap">
<button type="button" class="btn" onclick="fn_all_data()"><spring:message code="code.m20092" /></button><%--전체 보기 --%>
<button type="button" class="btn icon-excel" onclick="saveToExcel('st2')"><spring:message code="code.m00440" /></button><%--엑셀 다운로드 --%>
</span>
</h3>
<div class="graph-tbl-box bar-graph">
<div class="flex-box">
<div class="flex-box-inner width-auto">
<div class="bar-graph-wrap" >
<div class="graph-box">
<div id="chartHolder2" style="width: 530px; height: 712px;"></div>
</div>
</div>
</div>
<div class="flex-box-inner">
<div class="tbl-wrap graph-search-box" id="table2">
</div>
</div>
</div>
</div>
</div>
<!-- E : 지역 클릭시 노출되는 지역별 대학목록 영역 -->
</div>
</form:form>
</div>
</body>
</html>