Chartjs 无法使用 JSP 正确显示图表答案

【问题标题】：Chartjs doesn't show chart properly with JSPChartjs 无法使用 JSP 正确显示图表
【发布时间】：2014-01-10 20:12:03
【问题描述】：

我想将 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>

【问题讨论】：

问题应该出在数据上。您需要发布设置的代码，或在浏览器中查看您的源代码并发布数据产生的结果：[]
examAveragePoints 是 61.666668（它是一个圆形浮点数）
我也尝试使用61 而不是<%=examAveragePoints%> 但这并没有改变

标签： javascript jsp chart.js

【解决方案1】：

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

尝试使用硬编码的比例。

【讨论】：