입문흑흑
795
2018-02-19 16:08:34 작성 2018-02-26 17:48:43 수정됨
2
2395

구글차트예제


차트 공부중입니다!!

    public ModelAndView googleChart() { 	
    	List<ChartDTO> chartDto = boardService.chartList();
    	Map<String, Object> map = new HashMap<String, Object>();
    	map.put("chartDto", chartDto);		
	return new ModelAndView(ajaxJsonView, map);
    }

위의 방법으로 MappingJacksonJsonView를 사용하여 json 형식으로 보내는게 데이터 뽑기가 편하더라구요

근데 구글차트는 배열로만 가능한것 같으니

JSON을 배열로 변환하던지,

(JSON.parse() 함수를 써보려고 했으나 ajaxJsonView로 넘어오는건 쌍따옴표가 없기때문에

일일히 붙여주기도 깔끔하지 않은것 같아서..)

컨트롤러에서 배열로 주던지 해야 할것 같은데

ajax로 하는거라 어떤게 깔끔한지 조언 부탁드립니다.


function Chart() {
	
	$.ajax({
		type: "POST",
		url: "googleChart",
		success:function(msg) {
			test(msg.chartDto);
		},error:function(msg) {
			alert(msg.chartDto);
		}
	});
	
}


function test(datas) {
	// 차트 데이터
	var data = new google.visualization.arrayToDataTable([
		['phone', 'price', 'design', 'battery', 'specs', 'waterproof', 'camera', 'lifeSpan'],
		[],    // 요기에 값이 'iphone', 4, 2, 3, 5 ... String, int, int, ..들어와야함
		[]      // 요기에 값이 'galaxy', 2, 5, 3, 4 ... String, int, int, ...들어와야함
	]);
	
	var chart = new google.visualization.ColumnChart(document.getElementById('google_chart'));
	chart.draw(data, chart_options);
};


현재는 datas를 log찍어보면 값이

{modifyDate: null, statusKind: null, createDate: null, createUserId: null, camera: 10, …} 요런식으로 들어오는데

구글차트는 배열로 들어가야 하네용;

0
0
  • 답변 2

  • TheProdigy
    1k
    2018-02-19 16:26:13 작성 2018-02-19 16:27:58 수정됨
    0
  • 입문흑흑
    795
    2018-02-26 17:44:26 작성 2018-02-26 17:55:29 수정됨

    controller

        public ModelAndView googleChart() {
        	List<ChartDTO> list = boardService.chartList();
        	Map<String, Object> map = new HashMap<String, Object>();
        	map.put("chartDto", list);
        	logger.info("list :" + list);
    		return new ModelAndView(ajaxJsonView, map);
        }

    log

    list :[ChartDTO [phone=galaxy, price=8, design=9, battery=6, specs=9, waterproof=10, camera=10, lifeSpan=8], ChartDTO [phone=iphone, price=6, design=9, battery=8, specs=7, waterproof=8, camera=7, lifeSpan=10]]


    이게 자바 log 상에서는 dto바구니에 담은 순서대로 잘 log가 찍히는데

    이상하게 ajax로 받으면 스크립트 단에서 json 순서가 abc순으로 자동정렬되서 받아오더라구요

    chrome log

    1. 0:
      1. battery:6
      2. camera:10
      3. design:9
      4. lifeSpan:8
      5. phone:"galaxy"
      6. price:8
      7. specs:9
      8. waterproof:10
      9. __proto__:Object
    2. 1:
      1. battery:8
      2. camera:7
      3. design:9
      4. lifeSpan:10
      5. phone:"iphone"
      6. price:6
      7. specs:7
      8. waterproof:8

    구글차트는 data에 String, int, int, int... 이런식으로 와야하는데

    String이 중간에 와버리니까 이걸또 해결해야할 소스를 넣어야해요.

    요게 해결이 안되 소스가 넘 길어지네요

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.