[AMCHARTS] input값을 받아 차트 데이터 추가 생성

 

input값을 받아 amchar3의 차트에 데이터가 추가되며 생성하는 코드

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<jsp:include page="/WEB-INF/jsp/include/cssScript_monitoring.jsp" flush="true" />

<style type="text/css">
#chartdiv {
	width: 100%;
	height: 50%;
	font-size: 11px;
	cursor: pointer;
}

</style>

<div class="easyui-layout" data-options="fit: true">

	<div data-options="region:'center', border: false">
		<div id="pnChart" class="easyui-layout" data-options="fit: true">
			<div data-options="region:'center', split: true, title : '차트', collapsible : false" >
				<div id="chartdiv"></div>
				<input id="numInput" placeholder="number" />
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	
	function loadBody() { 
		//	  
		initChart();
	}
	

	
	function initChart() {
	  //
	  var count = 0;
	  var JsonData = [];
	  
	  $('#ageInput').on('input', function() {
	    var num = $('#numInput').val();
	    count += 1;

	    JsonData = {
	      num: num,
	      count: count
	    };

	    var chartData = JSON.stringify(JsonData);
	    console.log(chartData);
	    
	    chart.dataProvider.push(JsonData);
	    chart.validateData();
	    
	  });
	  
			//차트
			var chart = AmCharts.makeChart("chartdiv", {
			  "type": "serial",
			  "theme": "light",
			  "dataProvider": [],
			  "graphs": [{
			    "fillAlphas": 0.9,
			    "lineAlpha": 0.2,
			    "type": "column",
			    "valueField": "num"
			  }],
			  "categoryField": "count",
			  "chartCursor": {
			    "fullWidth": true,
			    "cursorAlpha": 0.1,
			    "listeners": [{
			      "event": "changed",
			      "method": function(ev) {
			        // Log last cursor position
			        ev.chart.lastCursorPosition = ev.index;
			      }
			    }]
			  },
			  "listeners": [{
			    "event": "init",
			    "method": function(ev) {
			      // Set a jQuery click event on chart area
			      jQuery(ev.chart.chartDiv).on("click", function(e) {
			        // Check if last cursor position is present
			        if (!isNaN(ev.chart.lastCursorPosition)) {
			          console.log("clicked on " + ev.chart.dataProvider[ev.chart.lastCursorPosition].country);
			        }
			      })
			    }
			  }]
			});
	}		
</script>

	  //
	  var count = 0;
	  var JsonData = [];
	  
	  $('#ageInput').on('input', function() {
	    var num = $('#numInput').val();
	    count += 1;

	    JsonData = {
	      num: num,
	      count: count
	    };

	    var chartData = JSON.stringify(JsonData);
	    console.log(chartData);
	    
	    chart.dataProvider.push(JsonData);
	    chart.validateData();
	    
	  });

 

.on()

jQuery는 이벤트 처리를 포함하여 웹 개발자에게 다양한 기능을 제공하는 널리 사용되는 JavaScript 라이브러리입니다. jQuery에서 "on" 메소드를 사용하여 웹 페이지의 요소에 이벤트 핸들러를 첨부할 수 있습니다.

jQuery에서 이벤트 처리기를 연결하기 위해 "on" 메서드를 사용하는 기본 구문은 다음과 같습니다.

$(selector).on(event, function)

여기서 "selector"는 이벤트 핸들러를 연결하려는 요소이고 "event"는 처리하려는 이벤트 유형(예: "클릭", "마우스오버" 등)

 

chart.dataProvider.push(JonData);

AmCharts 라이브러리를 사용하여 생성된 차트에 새 데이터를 추가하는 데 사용됩니다.

 

chart.validateData();

validateData()AmCharts 라이브러리 버전 3에서 제공하는 메서드로, 차트에 대해 설정된 데이터의 유효성을 검사하는 데 사용됩니다.

차트에서 데이터가 설정되거나 업데이트되면 차트의 내부 데이터 구조가 업데이트됩니다. 그러나 때때로 이 내부 구조는 설정된 데이터와 동기화되지 않거나 오류가 있을 수 있습니다.

validateData()방법은 데이터의 일관성과 정확성을 확인하고 이에 따라 차트의 내부 구조를 업데이트합니다. 이렇게 하면 차트가 올바르게 표시되고 설정된 데이터가 정확하게 표시됩니다.

메서드 validateData()는 차트 데이터를 설정하거나 업데이트한 후에 명시적으로 호출해야 합니다. 데이터가 업데이트되거나 차트에 추가될 때마다 이 메서드를 호출하여 차트가 항상 가장 정확한 정보를 표시하도록 하는 것이 좋습니다.