amCharts 사용방법 및 사용예제 총정리(!!)

Chart 라이브러리

프로젝트에서 Amcharts라는 라이브러리로 그래프를 그려 화면을 그렸음(포틀릿, 관리화면 통계페이지 등)

사용하기도 편리하고 UI 종류도 많고 뛰어나서 이렇게 정리해 놓는다 :)

사실 예제랄법해도 Amcharts에서 제공해주는 많은 샘플예제가 있는데

일단 어떻게 사용하는지의 대략적인 틀은 그 예제들을 파악해가면서 익히는게 좋다.

https://www.amcharts.com/

사이트의 Demos에 가면 샘플예제들을 많이 볼 수 있는데

주로 많이 사용하는 Column&Bar , Line, Pie 등의 그래프들.

그 외에도 많은 종류의 차트예제들이 있다.

그래프 클릭시 이벤트처리 방법, 범례처리, UI설정(뒷배경,가로줄,세로줄) , 마진여백..... 등의 세세한 컨트롤에 대해 정리해 놓은 곳이 없는 것 같아

예제를 기반으로 정리해본다..^^:;

amCharts 사용방법

amCharts관련 js들은 공식사이트의 Download 에서 가능.

환경에 맞게 파일을 위치시키고 읽어온다.

(정적인 파일들은 web서버에 위치하는게 좋다)

자세한건 예제를 보자..

<script src="/js/plugins/chart/amcharts.js"></script>
<script src="/js/plugins/chart/pie.js"></script>
<script src="/js/plugins/chart/serial.js"></script>
<script src="/js/plugins/chart/light.js"></script>

ajax로 가져온 Data를 생성할 Chart 객체의 Data에 넣어서 바인딩해준 후
그리고자 하는 element 요소에 chart를 그리면 되는 간단한 방식.
예제에서는 ajax로 data를 가져오는건 생략하고 샘플데이터 chartData를 두어 테스트했다.

amChart예제(1) - 단일 Bar 가로그래프

위와 같은 Bar 그래프를 그려보자.

테스트데이터의 갯수에 따라 그래프를 그리는 항목을 마음대로 설정할 수 있다.

첫 예제이니까 몇가지 잘 사용한 속성에 대해서 설명해보면........

(1) chart.dataProvider = chartData;  이 부분으로 Data를 주입하고 

(2) chart.fontFamily = "NanumGothic"; 로 글씨체 변경이 가능하다.

(3) chart.autoMargins= false; //원래는 그래프마다 margin이 잡힌다.

                                      //그래서 원하는 영역에 마진을 없애고 위와같이 꽉차게

                                      //그리거나, 사용자가 마진을 설정하고 싶을때 autoMargins을 false로 주면,

                                     // marginBottom, marginLeft 처럼 직접 설정이가능해진다.

(4) var categoryAxis = chart.categoryAxis; //세로

    var valueAxis = new AmCharts.ValueAxis(); //가로

    세로와 가로값에 대한 설정을 변경할 수 있는 객체 주로 최솟값 최댓값을

     지정할 때 많이 사용했다.

(5)  var graph = new AmCharts.AmGraph(); //resData를 주입해 그리는 부분

     labelText,  valueField,  fillColorsField, balloonText 의 속성에는

     resData에서 가져온 key값과 매칭된 값들이 들어가 그래프가 그려지게 된다.

(6)  chart.addListener("rendered", addListeners); // 그래프에 이벤트를 줌

     롤오버, 클릭 등에 대한 상세 이벤트들을 줄 수 있다.

(7)  chart.write(_this.portletId+"_chartdiv"); // element id값을 주어 그래프를 그린다.

//char에 주입할 테스트데이터
//color 필드로 그래프막대마다 색깔을 줄 수 있다.
chartData : [
		{
			"category" : "TEXT1",
			"value" : 0, 		
			"color" : "#5da5d4", 
			"txt" : ""
		}, 
		{
			"category" : " TEXT2",
			"value" : 0,		
			"color" : "#6fcaa9",
			"txt" : ""
		}, 
		{
			"category" : " TEXT3",
			"value" : 0,
			"color" : "#f9a085",
			"txt" : ""
		}, 
		{
			"category" : " TEXT4",
			"value" : 0,
			"color" : "#7592b1",
			"txt" : ""
		}
]

var chart = new AmCharts.AmSerialChart(); //그리고싶은 chart의 형태에 따라 선언(원형,막대선, 꺾은선그래프 등…)
	 chart.dataProvider = chartData;  //데이터 바인딩
	 chart.categoryField = "category";
	 chart.plotAreaBorderAlpha = 0;
	 chart.rotate = true;
	  chart.fontSize = 13;
	  chart.fontFamily = "NanumGothic"; //amchart 글씨체설정
	  chart.marginBottom= 27;
	  chart.marginLeft=125;
	  chart.marginRight= 20;
	  chart.autoMargins= false; //원래는 그래프마다 margin이 잡히는데 
autoMargins을 false로 주면, marginBottom 
marginLeft 처럼 직접설정가능
	  
	 //세로설정
	 var categoryAxis = chart.categoryAxis;
	 categoryAxis.gridAlpha = 0;
	 categoryAxis.axisAlpha = 0;
	 categoryAxis.gridPosition = "start";
	 categoryAxis.minimum = 0;
	 categoryAxis.maximum = 100;

	//가로설정
	 var valueAxis = new AmCharts.ValueAxis();
	 valueAxis.gridAlpha = 0; //세로선
	 valueAxis.maximum = 100;
	 //valueAxis.axisAlpha = 0;
	 chart.addValueAxis(valueAxis);
	 
	 //chartData에서 주입된 key값에 맞는 값들을 셋팅
	 var graph = new AmCharts.AmGraph();
	 graph.labelText = "[[txt]]"
	 graph.valueField = "value";
	 graph.type = "column";
	 graph.lineAlpha = 0;
	 graph.fillAlphas = 1;
	 graph.fillColorsField = "color";
	 graph.lineThickness = 0.2;
	 //graph.lineColor = "#5da5d4";
	 graph.color = "#fff"; //그래프안 텍스트색상
	 graph.balloonText = "[[category]]: [[txt]]";
	 graph.labelPosition = "middle";
	 chart.addGraph(graph);
	
	 chart.addListener("rendered", addListeners);
	 
	 //category 영역 function 생성
	 function addListeners(){
		 var categoryAxis = chart.categoryAxis;
		 categoryAxis.addListener("clickItem",handleClick);
		 categoryAxis.addListener("rollOverItem",handleOver);
	 }  
	 function handleOver(event){
		event.target.setAttr('cursor','pointer'); //category text 커서포인트
	  }
	 function handleClick(event){
		 var text = event.value;
		 _this.chartLink(text);
	 }
	//그래프클릭이벤트
	 chart.addListener("clickGraphItem" , function(event){ 
		 var text = event.item.category;
		 _this.chartLink(text);
	 });
	//마우스커서
	 chart.addListener("rollOverGraphItem" , function(event){ 
		 $(event.event.target).css('cursor' , 'pointer');
	 });
	 
	  // WRITE
	  chart.write(_this.portletId+"_chartdiv");

          chartLink : function(text){
	  var _this = this;
	       if(text == "TEXT1" ){
		//팝업오픈
	       }else if(text == "TEXT2"){
		//팝업오픈
	       }else if(text == "TEXT3"){
		//팝업오픈
	      }else if(text == "TEXT4"){
		//팝업오픈
	      }
       }

amCharts예제(2) - Bar 그래프, 두 항목 비교하기

나는 그려야하는 영역이 가로 500px 세로 380px ? 정도의 작은 영역이였기 때문에

범례가 잡아먹는 넓은 사이즈를 핸들링 하기가 너무 힘들었다.

그러다 범례영역을 따로 분리해 그릴 수 있다는걸 알게되고, 테스하여 성공!

<div  id="${portletId}_chartdiv1" style="width:484px; height:200px;"></div>

<div  id="${portletId}_chartdiv2" style="width:484px; height:30px;position:absolute"></div>

${portletId}_chartdiv1 영역에 chart를 그리고

${portletId}_chartdiv2 영역에 범례를 그리고 margin조정을 하였다.

범례는 legend라는 속성값으로 제어가 가능하다.

자세한건 예제소스를 보며 파악하자.

var chartData =[
		{category : "전체", value1 : 0, value2 : 0},         
		{category : "보험가입", value1 : 0, value2 : 0},
		{category : "보장유지", value1 : 0, value2 : 0},
		{category : "일반지급", value1 : 0, value2 : 0},
		{category : "사고지급", value1 : 0, value2 : 0},
		{category : "기타", value1 : 0, value2 : 0}
 ];
 
var chart = AmCharts.makeChart( _this.portletId+"_chartdiv1",{ // 차트를그릴영역 selector지정
	 //"theme" : "light",
	 "type" : "serial",	//type설정
	 "dataProvider" : chartData, //데이터
	  //chart.marginTop = 15;
	 "valueAxes" : [{
		//"unit" : "",
		//"position" : "bottom",
		//"title" : "건",
		//"titleColor" : "#666",
		//"titleRotation" : 0,
		"gridAlpha" : 0, //세로선 없애기
		 //, "axisAlpha" : 0 //세로축
		"minimum" : 0
	 }],
	"startDuration" : 0, // 1 이하면 동적으로 그려지지 않음, 1이상: 동적으로 그려짐
	"graphs" : [{
		 "balloonText" : "[[category]]  :  [[value]] ",
		 "fillAlphas" : 0.9,
		 "lineAlpha" : 0.2, 
		 "title " : "",
		 "type" : "column",
		 "valueField" : "value1", // chartData key 매칭
		 "lineColor" :  "#d6d6d6",
		 "fixedColumnWidth" : 21
		 
	},
	{
		 "balloonText" : "[[category]]  :  [[value]] ",
		 "fillAlphas" : 0.9,
		 "lineAlpha" : 0.2, 
		 "title " : "",
		 "type" : "column",
		 "valueField" : "value2", // chartData key 매칭
		 "lineColor" :  "#5da5d4", //갈색 // 핑크 "f9a085" ,
		 "fixedColumnWidth" : 21 //막대그래프너비
	}
	],
	//"useLineColorForBulletBorder" : true,
	"plotAreaBorderAlpha" : 0, // 박스
	//"plotAreaFillAlphas" : 0.2,
	//"dept3D" : 60,
	//"angle" : 30,
	"fontSize" : 13, //글씨사이즈
	"fontFamily" : "NanumGothic", //글씨 폰트
	"columnSpacing" : 3, //그래프 간 간격
	"categoryField" : "category",
	"categoryAxis" : {
		"gridPosition" : "start" 
		,"gridAlpha" : 0 // 가로선
		,"autoWrap" : true
	},
	//그래프영역 사이즈 조절
	 "marginBottom" : 30,
	 "marginLeft" : 50,
	 "marginRight" : 20,
	 "autoMargins" : true,
	 "legend" : { //범례설정
			"position":  "bottom", //위치
			"align" : "center", //정렬
			"borderAlpha" : 0, //범례를 감싸는 박스
			"marginLeft" : 50, // align을 center하고 더 늘릴때 사용
			"equalWidths" : true,
			"switchType" : false, //체크박스 없애기
			"autoMargins" : false, //margin 없애기
			"fontSize" : "10px", //범례글씨크기
			"markerSize" : 10, // 마커사이즈
			"divId" : _this.portletId+"_legendDiv", //범례 따로그릴div설정
			"valueWidth" : 20, // 범례간 사이즈. 50아래로.
			//"useGraphSettings" : true; //그래프는 범례가 그래프모양으로 바뀜
			"data" :[
				 {
					title : "고객요청",
					color : "#d6d6d6"
				},{
					title : "고객불만",
					color : "#5da5d4"
				}          
			]
		}
 });

amChart예제(3) - 단일 Bar 세로 그래프

var chartData = [
	 {category : "보험가입", value : 0, color : "#6fcaa9"},
	 {category : "보장유지", value : 0, color : "#6fcaa9"},
	 {category : "일반지급", value : 0, color : "#6fcaa9"},
	 {category : "사고지급", value : 0, color : "#5da5d4"},
	 {category : "기타", value : 0, color : "#5da5d4"}						 
]

var chart = AmCharts.makeChart(_this.portletId+"_chartdiv",{
	 "theme" : "light",
	 "type" : "serial",
	 "dataProvider" : chartData,
	 "valueAxes" : [{
		"unit" : "",
		"position" : "bottom",
		//"title" : "건",
		"titleColor" : "#666",
		"titleRotation" : 0,
		"gridAlpha" : 0 //세로선 없애기
	 }],
	"startDuration" : 0,
	"graphs" : [{
		 "balloonText" : "[[category]] :  [[value]] ",
		 "fillAlphas" : 0.9,
		 "lineAlpha" : 0.2, 
		 "title " : "2004",
		 "type" : "column",
		 "valueField" : "value",
		 "colorField" : "color",
		 "lineColor" :  "#fff"
	}
	],
	"plotAreaFillAlphas" : 0,
	"dept3D" : 60,
	"angle" : 30,
	"fontSize" : 13,
	"fontFamily" : "NanumGothic",
	"categoryField" : "category",
	"categoryAxis" : {
		"gridPosition" : "start" ,
		 "gridAlpha" : 0
	}
});

amChart예제(4) - 원형그래프

var chartData = [
		{
			"category": "자동송금",
			"amount": 0,
			"color": "#e3e7f2"
		},
		{
			"category": "자동화채널\n(자동송금제외)",
			"amount": 0,
			"color": "#7592b1"
		},
		{
			"category": "비대면",
			"amount": 0,
			"color": "#9fcaa9"
		},
		{
			"category": "대면",
			"amount": 0,
			"color": "#5da5d4"
		}
];

var chart;
// PIE CHART
chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData;
chart.titleField = "category";
chart.valueField = "amount";
chart.outlineColor = "#FFFFFF";
chart.colorField = "color";
chart.outlineAlpha = 0.8;
chart.outlineThickness = 2;
chart.labelRadius = -15;  //선길이 (음수면 내부에)
chart.labelText="[[category]]";
chart.balloonText="[[amount]]%";
chart.startDuration = 0; //동적정도
chart.fontSize = 13;
chart.fontFamily = "NanumGothic";
chart.depth3D = 0;
chart.autoMargins = true;
chart.marginTop = 15;
chart.marginBottom = 30;
chart.marginLeft = -10;
chart.marginRight = 0;
chart.pullOutRadius = 0;
// WRITE
chart.write(_this.portletId+"_chartdiv0");

amChart예제(5) - 선그래프와 막대그래프 혼합

chartData 는 아래와 같다.(그림으로대체)

val_1 , val_2 각각 선과, 막대그래프의 값.

현재 막대그래프 값 val_2가 모두 0 으로 되어 있어서 막대그래프는 안 나오고 있는것.

var chart;

// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.plotAreaBorderAlpha = 0;
chart.dataProvider = chartData;
chart.categoryField = "nm";
chart.startDuration = 0;
//chart.handDrawn = false;
chart.fontSize= 13;
chart.fontFamily = "NanumGothic";
chart.marginBottom= 27;
chart.marginLeft=40;
chart.marginRight= 20;
chart.autoMargins= false;

// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridPosition = "start";
categoryAxis.gridAlpha = 0;

// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.gridAlpha = 0;
//valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis);

// 막대그래프
var graph1 = new AmCharts.AmGraph();
graph1.type = "column";
graph1.title = "대내민원";
graph1.lineColor = "#a6c6e2";
graph1.valueField = "val_2";
graph1.lineAlpha = 1;
graph1.fillAlphas = 1;
graph1.dashLengthField = "dashLengthColumn";
graph1.alphaField = "alpha";
graph1.balloonText = "[[title]] 건수 :[[value]] [[additional]]";
chart.addGraph(graph1);

// line // 선그래프
var graph2 = new AmCharts.AmGraph();
graph2.type = "line";
graph2.title = "대외민원";
graph2.lineColor = "#1281b5";
graph2.valueField = "val_1";
graph2.lineThickness = 3;
graph2.bullet = "round";
graph2.bulletBorderThickness = 3;
graph2.bulletBorderColor = "#1281b5";
graph2.bulletBorderAlpha = 1;
graph2.bulletColor = "#1281b5";
graph2.dashLengthField = "dashLengthLine";
graph2.balloonText = "[[title]] 건수 :[[value]] ";
chart.addGraph(graph2);

// LEGEND
var legend = new AmCharts.AmLegend();
legend.useGraphSettings = true;
legend.position  =  "bottom";
legend.align = "center";
legend.fontSize = "10px";  
legend.autoMargins = false; 
legend.borderAlpha = 0;
legend.marginLeft = 80;
legend.markerSize = 10;
chart.addLegend(legend,_this.portletId+"_legendDiv"); //범례그리는방법

// WRITE
chart.write(_this.portletId+"_chartdiv");

amChart예제(6) - 큰 단위의 숫자값을 (천)(백)(만) 등으로 표현하기

var chart = AmCharts.makeChart(_this.portletId+"_chartdiv",{
	 //"theme" : "light",
	 "type" : "serial",
	 "dataProvider" : chartData,
	 "valueAxes" : [{
		//"unit" : "",
		//"position" : "bottom",
		//"title" : "건",
		//"titleColor" : "#666",
		//"titleRotation" : 0,
		"gridAlpha" : 0
	 }],
	 "usePrefixes" : true,
	 "prefixesOfBigNumbers" : [
		{"number" : 1e+3, "prefix" : "(천)"},
		{"number" : 1e+6, "prefix" : "(백)"},
		{"number" : 1e+9, "prefix" : "(억)"},
		{"number" : 1e+12, "prefix" : "(조)"}
	],
	"startDuration" : 0,
	"graphs" : [{
		 //"balloonText" : "[[amount1]] ",
		 /* "labelText" : "실시율", */
		 "fillAlphas" : 0.9,
		 "lineAlpha" : 0.2, 
		 "title " : "",
		 "type" : "column",
		 "valueField" : "amount1",
		 "lineColor" :  "#a6c6e2",
		 //"descriptionField" : "amount1",
		 //"labelText" :" [[amount1]] 건",
		 "fixedColumnWidth" : 25 //그래프막대너비
	},
	{
		// "balloonText" : "[[amount2]] ",
		/*  "labelText" : "전달율", */
		 "fillAlphas" : 0.9,
		 "lineAlpha" : 0.2, 
		 "title " : "",
		 "type" : "column",
		 "valueField" : "amount2",
		 "lineColor" :  "#1281b5",
		 //"descriptionField" : "amount1",
		 //"labelText" : " [[amount2]] 건",
		 "fixedColumnWidth" : 25 //그래프막대너비
	}
	],
	"plotAreaBorderAlpha" : 0,
	"plotAreaFillAlphas" : 0.1,
	//"dept3D" : 60,
	//"angle" : 30,
	"fontSize" : 13,
	"fontFamily" : "NanumGothic",
	"categoryField" : "category",
	"categoryAxis" : {
		"gridPosition" : "start" ,
		"gridAlpha" : 0
	},
	//그래프영역 사이즈 조절
	 "marginBottom" : 27,
	 "marginLeft" : 70,
	 "marginRight" : 10,
	 "autoMargins" : false
	//범례
	,legend : {
		"position":  "bottom", //위치
		"align" : "center", //정렬
		"borderAlpha" : 0, //범례를 감싸는 박스
		"marginLeft" : 50, // align을 center하고 더 늘릴때 사용
		"equalWidths" : true,
		"switchType" : false, //체크박스 없애기
		"autoMargins" : false, //margin 없애기
		"fontSize" : "10px", //범례글씨크기
		"markerSize" : 10, // 마커사이즈
		"divId" : _this.portletId+"_legendDiv", //범례 따로그릴div설정
		"valueWidth" : 10, // 범례간 사이즈. 50아래로.
		//"useGraphSettings" : true; //그래프는 범례가 그래프모양으로 바뀜
		"data" :[{
				title : "당월",
				color : "#a6c6e2"
				},{
					title : "전월",
					color : "#1281b5"
				}         
		]
	}
 });

amChart예제(7) - 가로 categoryAxis TEXT 줄바꿈 넣기

위 사진처럼 기준이 되는 X축 값의 TEXT가 길어 겹칠때가 있다.

그럴때 줄바꿈을 해준 소스

chartData는 생략할게요. 위에 샘플있는것들 중에 가져다

만들어 쓰시면 됩니다.

var chart;

// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.plotAreaBorderAlpha = 0;
chart.dataProvider = chartData;
chart.categoryField = "MIS_RV_VAL1";
//chart.labelText="[[category]]";
chart.startDuration = 0; // 1 이하면 동적으로 그려지지 않음, 1이상: 동적으로 그려짐
chart.fontSize= 13;
chart.fontFamily = "NanumGothic";
chart.autoMargins = true;
chart.marginBottom = 27;
chart.marginLeft = 50;
chart.marginRight = 20;

// AXES
// category
var categoryAxis = chart.categoryAxis;
//categoryAxis.labelRotation = 0; // 글자 각도
categoryAxis.gridAlpha = 0;
//categoryAxis.fillAlpha = 1; //0으로하면 바탕색 흰색으로 변함
//categoryAxis.fillColor = "#FFFFFF";
//categoryAxis.fontSize = 13.5;
categoryAxis.gridPosition = "start";
//categoryAxis.autoGridCount = false;
//categoryAxis.gridCount = 12;
categoryAxis.autoWrap = true;
categoryAxis.labelFunction = function(valueText, date, categoryAxis){
var str = [];
for(var i=0;i<valueText.length;i=i+2){
str.push(valueText[i] + (valueText[i+1]||'') + '\n');
}
return str.join('');
}
// value
var valueAxis = new AmCharts.ValueAxis();
//valueAxis.dashLength = 0; //대쉬선 간격
//valueAxis.title = "Visitors from country"; // 왼쪽TEXT
//valueAxis.labelsEnabled = false;
valueAxis.gridAlpha = 0;
//valueAxis.axisAlpha = 0; //1 이상이면 왼쪽에 선이 생김
chart.addValueAxis(valueAxis);

// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = "MIS_RV_VAL2";
graph.colorField = "color";
graph.balloonText = "<b>[[category]]: [[value]]</b>"; //마우스오버하면 나타나는 텍스트창
graph.type = "column";
graph.lineAlpha = 0; //1이상이면 그래프를 선으로 감쌈
graph.fillAlphas = 1;
graph.fixedColumnWidth =30; //그래프막대너비
//graph.descriptionField = "visits";    //그래위프 숫자표시
//graph.labelText = "[[description]]";
chart.addGraph(graph);

// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false; // true : 일부 영역을 드래그하면 줌됨, false : 줌사용x
chartCursor.categoryBalloonEnabled = false; //true로하면 하단에 박스가 따라다님
chart.addChartCursor(chartCursor);

chart.creditsPosition = "top-right";

// WRITE
chart.write(_this.portletId+"_chartdiv0");

amChart예제(8) - 그래프 위로 세로축 값 표현하기

이번에는 그래프표현 상 세로축값을 그래프 위로 표현해달라고했던 요구조건을

구현한 예제에요

chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "category";
chart.startDuration = 0; // 1 이하면 동적으로 그려지지 않음, 1이상: 동적으로 그려짐
chart.fontSize= 13;
chart.fontFamily = "NanumGothic";

// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 0; // 글자 각도
categoryAxis.gridAlpha = 0;
categoryAxis.fillAlpha = 1; //0으로하면 바탕색 흰색으로 변함
categoryAxis.fillColor = "#FFFFFF";
categoryAxis.gridPosition = "start";

// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.gridAlpha = 0;
valueAxis.dashLength = 0; //대쉬선 간격
//valueAxis.title = "만원"; // 왼쪽TEXT
valueAxis.labelsEnabled = false; //왼쪽 TEXT 안보이기
valueAxis.axisAlpha = 0; //1 이상이면 왼쪽에 선이 생김
valueAxis.minimum = 0;         
//         valueAxis.maximum = 110;
chart.addValueAxis(valueAxis);

// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = "value1";
graph.colorField = "color";
graph.balloonText = " 목표: [[value]] 만"; //마우스오버하면 나타나는 텍스트창
graph.type = "column";
graph.lineAlpha = 0; //1이상이면 그래프를 선으로 감쌈
graph.fillAlphas = 1;
graph.fixedColumnWidth =50; //그래프막대너비
graph.descriptionField = "value1";    //그래위프 숫자표시
graph.labelText = "[[value]] 만";  //그래위프 숫자표시
chart.addGraph(graph);

// GRAPH
var graph2 = new AmCharts.AmGraph();
graph2.valueField = "value2";
graph2.colorField = "color";
graph2.balloonText = "실적 : [[value]] 만"; //마우스오버하면 나타나는 텍스트창
graph2.type = "column";
graph2.lineAlpha = 0; //1이상이면 그래프를 선으로 감쌈
graph2.fillAlphas = 1;
graph2.fixedColumnWidth =50; //그래프막대너비
graph2.descriptionField = "value2";    //그래위프 숫자표시
graph2.labelText = "[[value]] 만";  //그래위프 숫자표시
chart.addGraph(graph2);         

// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false; // true : 일부 영역을 드래그하면 줌됨, false : 줌사용x
chartCursor.categoryBalloonEnabled = false; //true로하면 하단에 박스가 따라다님
chart.addChartCursor(chartCursor);