ajax로 jsp에서 값을 받아 차트 만들기

Question

jsp에 있는 값을 ajax로 controller로 넘긴 다음 리스트 형태로 만들어 gson으로 받아chart.js를 이용해 차트로 만드려고 합니다.자꾸 에러가 나는데 어디가 잘못된걸까요 ㅠ$.ajax({ url : &#34;chartCanvas&#34;, type : &#34;post&#34;, data : { mmsi : target.children[4].innerText }, success : function(data) { var chartLabels &#61; []; var chartData &#61; []; $.getJSON(&#34;http://localhost:8080/searoutesign/chartCanvas&#34;, function(data) { $.each(data, function(inx, obj) { chartLabels.push(obj.receiveTime); chartData.push(obj.mainPowerVoltage); }); createChart(); console.log(&#34;create Chart&#34;); }); var lineChartData &#61; { labels : chartLabels, datasets : [ { label : &#34;Date Income&#34;, fillColor : &#34;rbga(151, 187, 205, 0.2)&#34;, strokeColor : &#34;rbga(151, 187, 205, 1)&#34;, pointColor : &#34;rbga(151, 187, 205, 1)&#34;, pointStrokeColor : &#34;#fff&#34;, pointHighlightFill : &#34;#fff&#34;, pointHighlightStroke : &#34;rbga(151, 187, 205, 1)&#34;, data : chartData } ] } function createChart() { var ctx &#61; document.getElementById(&#34;chart_mpv&#34;).getContext(&#34;2d&#34;); LineChartDemo &#61; Chart.Line(ctx, { data : lineChartData, options : { scales : { yAxes : [{ ticks : { beginAtZero : true } }] } } }) } }, error : function() { alert(&#34;error&#34;); } });console.log(target.children[4].innerText) 하면 원하는 값 잘 나오구요, &#64;PostMapping(&#34;/chartCanvas&#34;) public String test(&#64;RequestParam(&#34;mmsi&#34;) String mmsi) { System.out.println(&#34;mmsi : &#34; &#43; mmsi); Gson gson &#61; new Gson(); List<GraphDTO> listGraph &#61; gs.selectGraph(mmsi); System.out.println(&#34;listGraph : &#34; &#43; listGraph.size()); System.out.println(&#34;listGraph : &#34; &#43; listGraph.get(2).getMainPowerVoltage()); System.out.println(&#34;listGraph : &#34; &#43; listGraph.get(2).getMmsi()); System.out.println(&#34;gson : &#34; &#43; gson.toJson(listGraph)); mav.addObject(&#34;listGraph&#34;, listGraph); return gson.toJson(listGraph); }임시로 찍어본 syso 값들도 다 잘 나옵니다gson의 경우 [{&#34;mmsi&#34;:&#34;1711021&#34;,&#34;receiveTime&#34;:&#34;2022-02-22 13:35:27.0&#34;,&#34;mainPowerVoltage&#34;:3.7, ... }, {&#34;mmsi&#34;:&#34;1711021&#34;,&#34;receiveTime&#34;:&#34;2022-02-22 13:35:27.0&#34;,&#34;mainPowerVoltage&#34;:3.7, ... }, { ... }]요런 식으로 나오구요html 개발자도구에서 뜨는 에러는요겁니다 ㅠㅠ 주소쪽이 잘못된 것 같아서 get으로도 바꿔 보고 pathname을 아예 다른걸로도 바꿔봤는데같은 에러가 발생합니다.조언 부탁드립니다 ㅠㅠ select top(5) A.MMSI, B.station_Name, A.ReceiveTime, A.MAINPOWERVOLTAGE, ... from table1 A full outer join tabe2 B on A.MMSI &#61; B.MMSI where A.MMSI &#61; ${mmsi}사용하는 sql은 이겁니다.

HJOW · Accepted Answer

그러면 다른 원인을 찾아봐야지요. 오타가 있다거나, 그리려는 영역이 충분히 크지 않다거나...

강지언 · Answer

컨트롤러 쪽에 responsebody 달고 오류 자체는 해결되었습니다.오류는 없어졌는데 차트를 그리지를 않습니다.success : function(data) 아래에 console.log(&#34;create Chart&#34;)가 안뜨는걸로 보아거기까지 접근이 안되는 것 같은데 오류도 안나오고 차트를 그리지도 않네요 ㅠ조언 부탁드립니다..

밤아홉시 · Answer

왜 success에서 다시 ajax를 콜 하시나요? success의 data가 원하시는 데이터가 아닌가요?

강지언 · Answer

밤아홉시 제가 ajax 다루는데 미숙합니다 ㅠ 차트 그리는 건 샘플 프로젝트 만들어서 해본건데 그 해봤던 코드에 저 success : function(data)의 data를 활용해야 한다고 생각해서 success 안에 넣었습니다. 혹시 자세한 설명 가능하실까요??!수정 방향에 대해서도 조언 부탁드립니다!

HJOW · Answer

success : function(data) { 여기안에 있는 data 와 $.getJSON(&#34;http://localhost:8080/searoutesign/chartCanvas&#34;, function(data) { 여기안에 있는 data 가다를까요?데이터 타입이 JSON 객체가 아닌 문자열로 넘어올 거 같긴한데그것도 dataType 속성 추가해주면 될일이구요데이터 같을 거 같은데...

강지언 · Answer

HJOWdata 둘 같습니다!

HJOW · Answer

그럼 success 콜백이function(data) { var chartLabels &#61; []; var chartData &#61; []; $.each(data, function(inx, obj) { chartLabels.push(obj.receiveTime); chartData.push(obj.mainPowerVoltage); }); var lineChartData &#61; { labels : chartLabels, datasets : [ { label : &#34;Date Income&#34;, fillColor : &#34;rbga(151, 187, 205, 0.2)&#34;, strokeColor : &#34;rbga(151, 187, 205, 1)&#34;, pointColor : &#34;rbga(151, 187, 205, 1)&#34;, pointStrokeColor : &#34;#fff&#34;, pointHighlightFill : &#34;#fff&#34;, pointHighlightStroke : &#34;rbga(151, 187, 205, 1)&#34;, data : chartData } ] } var ctx &#61; document.getElementById(&#34;chart_mpv&#34;).getContext(&#34;2d&#34;); LineChartDemo &#61; Chart.Line(ctx, { data : lineChartData, options : { scales : { yAxes : [{ ticks : { beginAtZero : true } }] } } }) }, 이런 모양새면 되지 않을까요?

강지언 · Answer

HJOW많이 배웁니다 감사합니다!말씀하신대로 문자열로 넘어왔는지 TypeError가 나서 JSON.parse(data)로 수정했구요,console.log(JSON.parse(data));console.log(obj.receiveTime);console.log(obj.mainPowerVoltage);다 원하는 값들 잘 나옵니다. 그런데,, push를 해주었는데 차트 틀만 나오고 그림은 또 안그려주네요 ㅠㅠ참 쉽지 않네요,,

ajax로 jsp에서 값을 받아 차트 만들기

8개의 답변

#chartjs 목록