Question

我想将JavaScript框架Chartjs包含到我的JSP项目中。我尝试了一个非常简单的条形图，只有一个日期（平均点数）。但它似乎没有正常工作。以下是我创建图表的画布对象的屏幕截图：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

尝试使用硬编码。

Chartjs没有使用JSP正确显示图表

1 个答案: