饼图不适用于使用 AngularJS 和 nvd3 的 Json 数据答案

【问题标题】：Pie Chart does not work with Json Data using AngularJS and nvd3饼图不适用于使用 AngularJS 和 nvd3 的 Json 数据
【发布时间】：2014-09-29 22:36:46
【问题描述】：

问题，

我想使用 API 中的动态数据显示饼图，但它根本不起作用。就好像我有一个硬编码的数据一样，它工作得很好。

我已经创建了一个 Plunker

 <nvd3-pie-chart
        data="exampleDataPieChart"
        id="toolTipExample2"
        x="xFunction()"
        y="yFunction()"
        width="150"
        tooltips="true">
    </nvd3-pie-chart>

http://plnkr.co/edit/Ve9X22X7RAuRGpA74tiB?p=preview

我正在使用 github API 并想为用户存储库中使用的语言绘制饼图

请看一下，让我知道我哪里做错了

谢谢

【问题讨论】：

标签： javascript json angularjs nvd3.js

【解决方案1】：

Plunkr

两件事：您的 JSON 格式与 exampleDataPieChart 不匹配，以及 AngularJS 不知道何时在内部运行 $scope.$apply()。

修复 #1：匹配格式

var exampleDataPieChart = [{"key":"One","y":5},{"key":"Two","y":2},{"key":"Seven","y":9}]

对比

var collectedData = [{"key":["JavaScript","CSS"],"y":[142531,205009]}]

修复 #2：通过创建本地 var data 让 AngularJS 知道您已更新数据，然后一旦准备好，通过运行 $scope.collectedData = data 触发 $scope.$apply()。

【讨论】：

感谢 Morgan :) 已经尝试了几个小时
您能否解释或指出一些东西来解释我们为什么需要 Fix2？我以为通过将新项目推送到 $scope.collectedData，$apply 会自动触发？
@JoaoLeal 是的，出于某种原因，$scope.collectedData.push() 没有更新数据，因此只需将其存储在临时变量中，然后使用$scope.collectedData = tempvar 似乎就可以了。我猜使用.push() 不会在内部触发$scope.$apply()。不确定。
谢谢@MorganDelaney