채워 넣기 chartjs ajax 서블릿

저는 자바에서 AJAX 및 차트 작업을하기가 매우 쉽습니다. ChartJS를 사용하여 웹 보고서 용 동적 대시 보드를 만드는 데 관심이 많습니다. 서블릿 응답에서 오는 아약스와 데이터를 사용하여 "차트 레이블"과 "데이터 세트"를 채울 수있는 방법을 묻습니다. 채워 넣기 chartjs ajax 서블릿

나는

<html> 
     <head> 
      <title>Bar Chart</title> 
      <script src="../Chart.js"></script> 
      <meta name = "viewport" content = "initial-scale = 1, user-scalable = no"> 
      <style> 
       canvas{ 
       } 
      </style> 
     </head> 
     <body> 
      <canvas id="canvas" height="450" width="600"></canvas> 


     <script> 

      var barChartData = { 
       labels : [,"January","February","March","April","May","June","July"], 
       datasets : [ 
        { 
         fillColor : "rgba(220,220,220,0.5)", 
         strokeColor : "rgba(220,220,220,1)", 
         data : [65,59,90,81,56,55,40] 
        }, 
        { 
         fillColor : "rgba(151,187,205,0.5)", 
         strokeColor : "rgba(151,187,205,1)", 
         data : [28,48,40,19,96,27,100] 
        } 
       ] 

      } 

     var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData); 

     </script> 
     </body> 
    </html>

출처

2014-02-11 toink

대답, 난 그냥 ... 몇 가지 튜토리얼에 이 실험 발견 .. 몇 가지 조사를 시도하고 아약스와 ChartJS에 대한 몇 가지 튜토리얼을 테스트하지만 그것이 작동되도록 수없는 것 하나는 일하고있다 ...

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 
<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script> 
     <script src="js/Chart.js"></script> 
     <title>JSP Page</title> 
    </head> 
    <body> 
     <h1>Hello World!</h1> 
     <br /> 

     <br/> 


     <br/> 
     <canvas id="canvas" height="450" width="700"></canvas> 

    </body> 
</html> 
<script> 

      $(document).ready(function(){ 
       GetCountryList(); 
      }); 


    function GetCountryList(){ 
     var data2 = ""; 
     $.ajax({ 
      type: "POST", 
      url: "qs", 
      data: "{\"type\":" + "\"country\""+  
      "}", 
      contentType: "application/x-www-form-urlencoded", 
      dataType: "json", 
      success: function(response) { 

       var resultsArray = (typeof response) == 'string' ? eval('(' + response + ')') : response; 



       var data2 = new Array(); 
       for(var i=0; i<resultsArray.length;i++){ 
        data2[i] = resultsArray[i].workgroup; 


        var barChartData = { 
          labels : data2, 
          datasets : [ 
            { 
              fillColor : "rgba(220,220,220,0.5)", 
              strokeColor : "rgba(220,220,220,1)", 
              data : [65,59,90,81,56,55,40,80] 
            } 
          ] 

        }; 
       } 


     var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData); 

      } 


     });     

    } 

</script>

출처

2014-02-12 08:04:23 toink

답변

관련 문제