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轴看起来不正确，特别是当最大刻度的值小于或等于 {时{1}}

解决此问题的最简单方法是将 5 属性设置为 stepSize 以获取y轴刻度，如下所示：< / p>
1

Chart.js的Y轴错误

1 个答案: