2014-01-10 3 views
0

Я хотел включить фреймворк JavaScript Chartjs в свой проект JSP. Я попробовал очень простую гистограмму с одной датой (среднее количество очков). Но, похоже, он работал неправильно. Вот скриншот объекта холста, где я создал диаграмму: http://i43.tinypic.com/15wc6md.pngChartjs не показывает диаграмму должным образом с JSP

Мой код:

<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> 
+0

Проблема должна быть данными. Вам нужно будет опубликовать код, который устанавливает или просматривает ваш источник в браузере, и публикует результат того, что получается из данных: [<% = examAveragePoints%>] – developerwjk

+0

'examAveragePoints' - 61.666668 (это округлый поплавок) – elementzero23

+0

Я также попытался использовать '61' вместо' <% = examAveragePoints%> ', но это ничего не изменило – elementzero23

ответ

0

Проблема заключается в том, что у вас есть только один объект в наборе данных. Chart.js устанавливает объект с наименьшим номером в 0 по оси y. Я столкнулся с той же проблемой, но пока не нашел решения. Это, как представляется, распространенная проблема с Chart.js https://github.com/nnnick/Chart.js/issues/252

Попробуйте использовать шкалу в твердой шкале.

Смежные вопросы