Question

您好我正在尝试使用angular-charts.js框架显示多个图表。我的问题是我需要在每张图表上使用相同的比例。目前，每个图表都有自己的比例，基于显示的数据。在呈现图表之前，我无法预测数据。所以我需要像回调函数......

有没有解决方案？

使用Angular 1.6.1

编辑：

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

标记：

<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根据索引

计算每个图表的数据

Answer 1

我终于找到了解决问题的方法。

我使用父控制器来存储我的scale变量，并在我的Child Controllers中使用$ watch表达式来重新呈现每个图表。

父：

$scope.max = 0;

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

子：

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

Answer 2

在渲染后更改图表的选项时，需要调用更新功能。

.update（持续时间，懒惰）

触发图表更新。这可以安全地调用   替换整个数据对象。这将更新所有尺度，   传说，然后重新渲染图表。

Documentation

实施例

// 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();

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

2 个答案:

实施例