AngularJS 图表未正确更新数据

Question

我正在使用 angular 图表，我正在尝试显示根据当前项目更新的图表 selected，它在我 select 的第一个项目上运行良好]，但在我 select 第二项之后，第一项 selected 的数据似乎仍然存在于图表上（尽管数据已完全改变），问题如下所示：

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 %>%"
}
});

canvas:

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

对象数据如下所示：

对导致此问题的原因有任何想法吗？

编辑： 这是显示问题的 fiddle：https://jsfiddle.net/PGjtS/130/

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

Answer 1

似乎（从您的图片来看）您的 selectItem 重复触发 - 您可能需要仔细检查触发器。

您可能还想检查一下 tooltipTemplate - 尽管您附加了 %，但（从您的图片上看）您的数字加起来并不等于 100。

Answer 2

已发布

问题似乎是因为DOM 操作

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

Answer 3

根据文档，您可以试试这个... 如果你想重新加载canvas发送广播使用：

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

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

Answer 4

这个问题我遇到过几次。

只需将您的更新图表代码放入 "updateChart" 之类的新函数中，然后使用如下方式调用它：

$timeout(updateChart(data), 200)

它将解决您的问题。

编辑：

移动你的：

$scope.currentItem = item;

在你超时的时候它会起作用:)

AngularJS 图表未正确更新数据

AngularJS Charts not updating data correctly

javascript

angularjs

chart.js