javascript - 饼图不适用于使用 AngularJS 和 nvd3 的 Json 数据

Question

问题

我想使用 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，想要绘制用户存储库中使用的语言的饼图

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

谢谢

Answer 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.$apply()运行$scope.collectedData = data。