Y轴错误的Chart.js

Question

最近好吗？ 我对chart.js有问题，并且Y轴响应不佳。 我有2条，1的值为3，另一条的值为1。当我拥有此数据时，Y轴很奇怪：

但是，当我拥有另一个大于5的柱形图时，该图形将完美运行。

如果我没有高于5的小节，也许可以通过将最小值指定为例如Y轴上的8来解决。但是我没有找到任何技巧。

我感谢您的帮助！ ：D

编辑：

这是代码：

<div  ng-show="showChartData" >
    <canvas class="chart chart-bar"  id="bar"  height="70px;"  chart-data="chartData"  chart-labels="labels"  chart-series="series" chart-options="chartOptions" ></canvas>
</div>

然后控制器加载数据：

angular.module("pf.directives.directive-absences.chart", ["chart.js", "pf.filter.string-to-date"])
.directive("absencesChart", function() {
    var filename = "directive-absences-chart.js";

    return {
        restrict:   "AE",
        templateUrl: "app/templates/directive-absences-chart.html",
        scope: {
            "dateRangeInfo"                      : "=",
            "absencesList"    : "="
        },
        link: function(scope){
            scope.$watch(function(scope) { return scope.absencesList; }, function() {
                scope.changeChartData();
            });
            scope.$watch(function(scope) { return scope.dateRangeInfo.month; }, function() {
                scope.changeChartData();
            });
            scope.$watch(function(scope) { return scope.dateRangeInfo.year; }, function() {
                scope.changeChartData();
            });
        },
        controller:["$scope",
                    "$log",
                    "$filter", 
                    "$translate",
                    "RequestsService",
                    "CallsUtil",

                    function($scope,
                            $log,
                            $filter,
                            $translate,
                             RequestsService,
                             CallsUtil){
           $log.info(filename);

           $scope.chartOptions = {
           };

           $scope.changeChartData = function() {
               $scope.labels = [];
               $scope.series = [];
               $scope.chartData = [];
               $scope.showChartData = false;
               var d = new Date($scope.dateRangeInfo.year, +$scope.dateRangeInfo.month, 0);
               for(var i = 1; i <= d.getDate(); i++) {
                   $scope.labels.push(i);
                   $scope.chartData[i - 1] = 0;
               }
               for(var absenceKey in $scope.absencesList) {
                   var absence = $scope.absencesList[absenceKey];
                   var offFrom = $filter("stringToDate")(absence.off_from, false);
                   var returnDate = $filter("stringToDate")(absence.return_date, false);
                   var lastTimeOffFrom = new Date(offFrom);
                   lastTimeOffFrom.setHours(23,59,59,999);
                   var hours = 0;
                   while(lastTimeOffFrom < returnDate) {
                       hours = Math.abs(lastTimeOffFrom - offFrom + 1) / 36e5;
                       $scope.chartData[lastTimeOffFrom.getDate() - 1] = $scope.chartData[lastTimeOffFrom.getDate() - 1] + hours;
                       if($scope.chartData[lastTimeOffFrom.getDate() - 1] > 0) {
                           $scope.showChartData = true;
                       }
                       lastTimeOffFrom.setDate(lastTimeOffFrom.getDate() + 1);
                       offFrom = new Date(lastTimeOffFrom);
                       offFrom.setHours(0,0,0,0);
                   }
                   hours = Math.abs(returnDate - offFrom) / 36e5;
                   $scope.chartData[lastTimeOffFrom.getDate() - 1] = $scope.chartData[lastTimeOffFrom.getDate() - 1] + hours;
                   if($scope.chartData[lastTimeOffFrom.getDate() - 1] > 0) {
                       $scope.showChartData = true;
                   }
               }
               $scope.series.push($translate.instant("DASHBOARD.ABSENCES"));
           };
           $scope.changeChartData();
        }]
    };
});

我遵循了此文档： http : //jtblin.github.io/angular-chart.js/#bar-chart

Answer 1

这是因为，ChartJS自动计算y轴蜱，这有时使y轴看不正确，特别是当最大刻度的值小于或等于5 。

解决此问题的最简单方法是，将y轴刻度的stepSize属性设置为1 ，如下所示：

scales: {
   yAxes: [{
      ticks: {
         stepSize: 1
      }
   }]
}