渲染后在 Angular-Charts.js 中设置范围

Question

Hi im currently trying to show multiple charts with angular-charts.js framework. My problem is that i need the same scale on each chart. At the moment each chart has its own scale based upon the data displayed. I can not predict the data before the charts are rendered. So I need something like a Callback function...

Is there any solution?

Using Angular 1.6.1

EDIT:

$scope.options = {
                  scales: {
                    yAxes: [{
                            ticks: { min: 0, max: },
                              }]
                  }
                };

Markup:

<div ng-repeat="i in getNumberOfSprints(numberOfSprints) track by $index">
                <h3>
                    Sprint {{$index+1}}
                </h3>
                <div ng-controller="MyCtrl">
                    <canvas class="chart-bar"
                      chart-data="GetData($index)"
                      chart-dataset-override="datasetOverride" chart-options="options">
                    </canvas> 
                </div>
            </div>

GetData calculates Data for each chart based on index

Answer 1

I finally found a solution for my Problems.

I used a parent-controller to store my scale variable and in my Child Controllers a $watch expression to rerender each chart.

Parent:

$scope.max = 0;

    $scope.setMax = function(val){
        $scope.max = Math.max($scope.max, val);
        console.log($scope.max);
    }

Child:

$scope.$watch('max',function(){
    ...
});

Answer 2

When you change a chart's option after it was render, you need to call the update function.

.update(duration, lazy)

Triggers an update of the chart. This can be safely called after replacing the entire data object. This will update all scales, legends, and then re-render the chart.

Documentation

Example:

// duration is the time for the animation of the redraw in milliseconds
// lazy is a boolean. if true, the animation can be interrupted by other animations
    
// Would update the first dataset's value of 'March' to be 50
myLineChart.data.datasets[0].data[2] = 50; 
    
// Calling update now animates the position of March from 90 to 50.
myLineChart.update();