问题
我想使用 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,想要绘制用户存储库中使用的语言的饼图
请看一下,让我知道我哪里做错了
谢谢
最佳答案
有两件事:您的 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
。
关于javascript - 饼图不适用于使用 AngularJS 和 nvd3 的 Json 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26110014/