AngularJS图表未正确更新数据

Question

我正在使用角度图表，我正在尝试显示根据所选项目更新的图表，它在我选择的第一个项目上运行良好，但在我选择第二个项目后，它看起来像数据从所选的第一个项目仍然出现在图表上（尽管数据已经完全改变），问题看起来像这样：

app.controller("itemsAppController", function ($scope, $timeout, itemsData, itemsFactory, $filter) {
$scope.items = itemsData.Items;


$scope.itemSelected = false;
$scope.currentItem = {};

$scope.selectItem = function (itemId) {
    $scope.itemSelected = false;

    var foundItem = $filter('filter')($scope.items, { ItemId: itemId }, true);
    var item = foundItem[0];
    $scope.currentItem = item;  

    $timeout(function () {
        $scope.itemSelected = true;
    }, 500);
};

$scope.chartOptions = {
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%"
}
});

画布：

<div ng-show="itemSelected">
    <canvas class="chart chart-pie" data="currentItem.MostUsedChampionsPrePatchData" labels="currentItem.MostUsedChampionsPrePatchLabels" legend="true" options="chartOptions"></canvas>
</div>

对象数据如下所示：

是什么导致了这个问题的想法？

编辑：以下是显示问题的小提琴：https://jsfiddle.net/PGjtS/130/

重新创建时，当我包含动画和ng-show

时会出现问题

Answer 1

已发布here

问题似乎是由于DOM操作引起的

使用ng-if或ng-switch代替ng-show解决问题

Answer 2

似乎（从你的图片中）你的selectItem会反复触发 - 你可能需要仔细检查触发器。

您可能还想检查tooltipTemplate - 虽然您附加了％，但它（从您的图片中）看起来并不是您的数字加起来为100。

Answer 3

根据文档，您可以尝试这个... 如果要重新加载画布，请使用以下方式发送广播：

$scope.$broadcast("$reload", {});

这将重新绘制图表（例如，当图表变得可见时）

Answer 4

我有几次这个问题。

只需将更新图表代码放在像“updateChart”这样的新函数中，然后使用以下内容调用它：

$timeout(updateChart(data), 200)

它将解决您的问题。

编辑：

移动你的：

$scope.currentItem = item; 

在你的超时时间，它会工作：）