Chartjs无法使用JSP正确显示图表 [英] Chartjs doesn't show chart properly with JSP

问题描述

我想将JavaScript框架Chartjs包含到我的JSP项目中.我尝试了一个只有一个日期(平均点数)的非常简单的条形图.但它似乎无法正常工作.这是我在其中创建图表的画布对象的屏幕截图: http://i43.tinypic.com/15wc6md .png

I wanted to include the JavaScript framework Chartjs into my JSP project. I tried a very simple bar chart with just one date (an average number of points). But it doesn't seem to have worked correctly. Here is a screenshot of the canvas object where I created the chart: 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>

推荐答案

问题是数据集中只有一个对象. Chart.js将编号最小的对象设置为y轴上的0.我面临着同样的问题，但是我还没有找到解决方案. Chart.js似乎是一个常见问题 https://github.com/nnnick/Chart.js/issues/252

The problem is that you only have one object in your dataset. Chart.js sets the object with the lowest number to 0 on the y-axis. I'm facing the same problem but I havent found a solution yet. It seems to be a common problem with Chart.js https://github.com/nnnick/Chart.js/issues/252

尝试使用硬编码的秤.

这篇关于Chartjs无法使用JSP正确显示图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！