Chartjs는 JSP에서 차트를 제대로 표시하지 않습니다.

Question

JSP 프로젝트에 JavaScript 프레임 워크 Chartjs를 포함하고 싶습니다. 나는 단 하나의 날짜 (평균 포인트 수)가있는 매우 단순한 막 대형 차트를 시도했다. 하지만 제대로 작동하지 않는 것 같습니다. http://i43.tinypic.com/15wc6md.png

내 코드는 다음과 같습니다 :

<canvas id="chartjs"></canvas> 
    <script> 
     //Get context with jQuery - using jQuery's .get() method. 
     var ctx = $("#chartjs").get(0).getContext("2d"); 
     //This will get the first returned node in the jQuery collection. 
     var myNewChart = new Chart(ctx); 
     var data = { 
       labels : ["Durchschnittsgesamtpunktzahl aller Teilnehmer"], 
       datasets : [ 
        { 
         fillColor : "rgba(220,220,220,0.5)", 
         strokeColor : "rgba(220,220,220,1)", 
         data : [<%=examAveragePoints%>] 
        } 
       ] 
      } 

var options = { 

       //Boolean - If we show the scale above the chart data   
       scaleOverlay : false, 

       //Boolean - If we want to override with a hard coded scale 
       scaleOverride : false, 

       //** Required if scaleOverride is true ** 
       //Number - The number of steps in a hard coded scale 
       scaleSteps : null, 
       //Number - The value jump in the hard coded scale 
       scaleStepWidth : null, 
       //Number - The scale starting value 
       scaleStartValue : null, 

       //String - Colour of the scale line 
       scaleLineColor : "rgba(0,0,0,.1)", 

       //Number - Pixel width of the scale line  
       scaleLineWidth : 1, 

       //Boolean - Whether to show labels on the scale 
       scaleShowLabels : true, 

       //Interpolated JS string - can access value 
       scaleLabel : true, 

       //String - Scale label font declaration for the scale label 
       scaleFontFamily : "'Arial'", 

       //Number - Scale label font size in pixels 
       scaleFontSize : 12, 

       //String - Scale label font weight style  
       scaleFontStyle : "normal", 

       //String - Scale label font colour 
       scaleFontColor : "#666",  

       ///Boolean - Whether grid lines are shown across the chart 
       scaleShowGridLines : true, 

       //String - Colour of the grid lines 
       scaleGridLineColor : "rgba(0,0,0,.05)", 

       //Number - Width of the grid lines 
       scaleGridLineWidth : 1, 

       //Boolean - If there is a stroke on each bar  
       barShowStroke : true, 

       //Number - Pixel width of the bar stroke  
       barStrokeWidth : 2, 

       //Number - Spacing between each of the X value sets 
       barValueSpacing : 5, 

       //Number - Spacing between data sets within X values 
       barDatasetSpacing : 1, 

       //Boolean - Whether to animate the chart 
       animation : true, 

       //Number - Number of animation steps 
       animationSteps : 60, 

       //String - Animation easing effect 
       animationEasing : "easeOutQuart", 

       //Function - Fires when the animation is complete 
       onAnimationComplete : null 

      } 
     new Chart(ctx).Bar(data,options); 
    </script> 

Answer 1

문제는 당신은 당신의 데이터 세트에서 하나 개의 객체를 가지고있다 여기에 내가 차트를 만든 캔버스 객체의 스크린 샷이다. Chart.js는 y 축에서 숫자가 가장 작은 개체를 0으로 설정합니다. 나는 같은 문제에 직면하고있다. 그러나 나는 해결책을 아직 찾지 못했다. Chart.js의 일반적인 문제인 것 같습니다. https://github.com/nnnick/Chart.js/issues/252

하드 코드 된 스케일을 사용해보십시오.