如何设置angularjs极坐标轴的最大值？

Question

如何将最大极轴值设置为100？目前，最大值取决于收到的数据的最高值。

目前我当前的工作代码：

angular.module("app", ["chart.js"]).controller("ChartCtrl", function($scope) {

    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    
    $scope.data = [65, 59, 80, 81, 56, 55, 40];
    var sum = $scope.data.reduce(function add(a, b) {
        return a + b;
    }, 0);
    
    $scope.options = {
      pieceLabel: {
        render: function (args) {
          return args.label + " " + Math.round(args.value*100/sum,2)+"%";
        },
        fontColor: '#000',
        position: 'outside',
        segment: true
      }
    };
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js"></script>
<script src="https://rawgit.com/beaver71/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>

<div ng-app="app" ng-controller="ChartCtrl">
  <canvas id="pie" class="chart chart-polar-area"
         chart-data="data" chart-labels="labels" chart-options="options">
  </canvas> 
</div>

Answer 1

为此，您可以在选项

上使用scale属性

scale: {
    ticks: {
        min: 0,
        max: 100,
        stepSize: 10
    }
}

我更新了你的例子

＆＃13;

＆＃13;

angular.module("app", ["chart.js"]).controller("ChartCtrl", function($scope) {

    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    
    $scope.data = [65, 59, 80, 81, 56, 55, 40];
    var sum = $scope.data.reduce(function add(a, b) {
        return a + b;
    }, 0);
    
    $scope.options = {
      pieceLabel: {
        render: function (args) {
          return args.label + " " + Math.round(args.value*100/sum,2)+"%";
        },
        fontColor: '#000',
        position: 'outside',
        segment: true,
      },
      scale: {
        ticks: {
            min: 0,
            max: 100,
            stepSize: 10
        }
      }
    };
  
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js"></script>
<script src="https://rawgit.com/beaver71/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>

<div ng-app="app" ng-controller="ChartCtrl">
  <canvas id="pie" class="chart chart-polar-area"
         chart-data="data" chart-labels="labels" chart-options="options">
  </canvas> 
</div>

＆＃13;

＆＃13;

＆＃13;