simpleisbest
12
2018-11-20 12:28:27 작성 2018-11-20 14:31:17 수정됨
5
772

구글차트 리로드 문제 해결이 안납니다.


스프링에서 구글차트 2개를 써서 한개는 매장의 전체 품목별 판매수를 표현하고 다른 하나는 월별 품목별 판매수를 표현하려고합니다. 문제는 구글차트가 2번 로드할 수 없다는 것이였죠.

그래서 짧은 지식으로 전체 통계는 바로 표시하고 월별통계는 iframe을 써서 문제점을 해결하려고 했는데..

안됐습니다.

그래서 구글링을 통해 한페이지에  한번 로드하고 차트 2개를  표현하면 2개 차트가 나오는데까지는 성공 했습니다. 

문제는 여기서부터 막혔습니다. 전체통계는 문제없는데 드롭다운을 통해 숫자를 선택해 그 값으로 월별통계를 바꾸려고 했는데 여기서 다시 Google Charts loader.js can only be loaded once.가 떴습니다.

새로고침을 통해 차트를 바꾸려고 했는데 새로고침을 하는 과정에서 구글차트가 리로드로 되면서 에러가 발생하되는 것 같습니다.

DB에서 sql문으로 접근하려면 드롭다운한 값을 controller에서  다시 처리해야해서 접근하는 아래와 같은 방법을 사용하였습니다. 

아래는 그 코트입니다.


<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      google.charts.setOnLoadCallback(drawChart2);
      
      function drawChart() {

        var data = google.visualization.arrayToDataTable(
        	${str}	
        );

        var options = {
          title: '상품가격 비율'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
      
      function drawChart2() {

        var data2 = google.visualization.arrayToDataTable(
          	${sss}	
          );

          var options2 = {
            title: '상품가격 비율'
          };

          var chart2 = new google.visualization.PieChart(document.getElementById('piechart2'));

          chart2.draw(data2, options2);
        }
    
            </script>
          
		<div data-role="header" data-position="fixed">
			<h1>통계차트</h1>
			<a href="#myPage" data-icon="home">홈으로</a>

			<c:if test="${login.id != null}">
				<a href="#" onclick="logout()" data-icon="check">로그아웃</a>
			</c:if>
		</div>
		
		<div id="piechart" style="width: 900px; height: 500px;"></div>
  		<div style="background-color: white;"></div>
  		
		<div id="piechart2" style="width: 900px; height: 500px;"></div>
  		<div style="background-color: white;"></div>
  		
  		<form action="/seller/chart" name="orderdate" id="orderdate" method ="post">
  		<label class="reg" for=class>월별</label>
		<select id="select">
             <option value="1">1</option>
             <option value="2">2</option>
             <option value="3">3</option>
             <option value="4">4</option>
             <option value="5">5</option>
             <option value="6">6</option>
             <option value="7">7</option>
             <option value="8">8</option>
             <option value="9">9</option>
             <option value="10">10</option>
             <option value="11">11</option>
             <option value="12">12</option>
           </select>
			<input type="hidden" name="cno" value="${cno}">
			<button type="button" onclick="eee" data-enhanced="false" style="position: absolute; right: 0; ">버튼</button>
		</form>
		
		
		<div data-role="footer">
			<h1>footer</h1>
		</div>
		
		<script type="text/javascript">
		function eee() {
			var selected = document.getElementById('select').value
			window.location.href = "/seller/chart?cno=" + ${cno} + "&orderdate=" + selected;
		}
		</script>
@RequestMapping(value = "/chart", method = RequestMethod.POST)
	@ResponseBody
	public void chartPost(HttpServletRequest request, Model model, int cno, int orderdate) throws Exception {
		System.out.println(orderdate);
		
		List<OrderTotalCountDTO> list = sellerService.orderMonthCount(cno);
		System.out.println(list);
		System.out.println(" 리스트 사이즈  : " + list.size());
		String str ="[";
		str +="['품명' , '수량'] ,";
		int num =0;
		for(OrderTotalCountDTO  dto : list){
			str +="['";
			str  += dto.getName();
			str +="' , ";
			str += dto.getCount();
			str +=" ]";
			
			num ++;
			if(num<list.size()){
				str +=",";
			}		
		}
		str += "]";
		
		model.addAttribute("str", str);
		
		List<OrderTotalCountDTO> list2 = sellerService.MonthChart(cno, orderdate);
		System.out.println(list2);
		System.out.println(" 리스트 사이즈  : " + list2.size());
		String str2 ="[";
		str2 +="['품명' , '수량'] ,";
		int num1 =0;
		for(OrderTotalCountDTO  dto : list2){
			str2 +="['";
			str2  += dto.getName();
			str2 +="' , ";
			str2 += dto.getCount();
			str2 +=" ]";
			
			num1 ++;
			if(num1<list2.size()){
				str2 +=",";
			}		
		}
		str2 += "]";
		model.addAttribute("sss", str2);
	}

0
0
  • 답변 5

  • 윤졸디
    112
    2018-11-20 13:13:01

    http://jsfiddle.net/rn5dyss0/1/

    1
  • simpleisbest
    12
    2018-11-20 14:27:19

    답변주셔서 감사합니다.

    아직 제가 지식이 적어서 위와같은 코드 전목시키는게 감이 잘 안잡히네요.

    아래코드로 클릭시 controller에서 받은 cno와 orderdate를 받아서  클릭을 하면 url을 바꿔서 

    차트변화를 하려는데 새로고침시에 구글차드 리로드 에러가나서 적용하는거에 대한 설명을 해주실 수 있나요?

    <script type="text/javascript">
    		function eee() {
    			var selected = document.getElementById('select').value
    			window.location.href = "/seller/chart?cno=" + ${cno} + "&orderdate=" + selected;
    		}
    		</script>
    1
  • 윤졸디
    112
    2018-11-20 14:55:36

    ajax로 데이터 받아오면 새로고침 할 필요가 없지 않을까요?

    0
  • simpleisbest
    12
    2018-11-20 16:10:45 작성 2018-11-20 16:11:55 수정됨

    ajax를 적용해보려고 했는데 

    제가 적용해보니 DB의 자료를 인식을 못해서

    구글차트가 인식할 수 있게 처음부터 밑에 처럼 구글차트의 형식에 맞게 형태를 만들어서

    JSON 형태의 자료를 model에 담아서 던져주었습니다.

    저형식 말고 Ajax을 만들어서 던져주는 방법은 구글차트가 나오지 않아습니다.

    for(OrderTotalCountDTO  dto : list){
    			str +="['";
    			str  += dto.getName();
    			str +="' , ";
    			str += dto.getCount();
    			str +=" ]";
    			
    			num ++;
    			if(num<list.size()){
    				str +=",";
    			}		
    		}
    		str += "]";
    		
    		model.addAttribute("str", str);


    0
  • 윤졸디
    112
    2018-11-20 16:31:14

    구성하신 데이터 형식을 ajax로 데이터 던져주시면 될것같은데요.

    이미 Controller에 @ResponseBody 쓰고 계신데 void  를 String으로 바꾸고 return 해주시면

    ajax로 했을때 직접 구성하신 데이터 그대로 넘어갈거에요.

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