Допомога у програмуванні, відповіді на питання / Javascript / Створення кругової діаграми Динамічно з nvd3 і AngualrJs - javascript, angularjs, d3.js, nvd3.js

Динамічно створювати діаграму з nvd3 та AngualrJs - javascript, angularjs, d3.js, nvd3.js

Проблема,

У мене є API, який приносить ключ і значення, використовуючи це я хочу намалювати кругову діаграму, але не пощастило до цих пір.

Це я намагався так,

 $scope.collectedData=

[ {
key:keys,
y: 541
}];


$scope.xFunction = function () {
return function (d) {
return d.key;
};
};

$scope.yFunction = function(){
return function (d) {
return d.y;
};
}

Html-файл

<nvd3-pie-chart
data="collectedData"
id="toolTipExample1{{$index}}"
width="550"
height="350"
x="xFunction()"
y="yFunction()"tooltips="true">
</nvd3-pie-chart>

Це малює кругову діаграму, оскільки значення вже визначені. Але як зробити з вартістю динамічно з API?

Будь-які пропозиції вітаються. Будь ласка, допоможіть

Відповіді:

0 для відповіді № 1

Зразок коду адаптований з http://demos.telerik.com/kendo-ui/radar-charts/angular

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<div class="demo-section k-content">
<div class="box-col" style="width: 500px;">
<h4>Hover some series</h4>
<div kendo-chart
k-title="{ text: "1024x768 screen resolution trends for 2009", position: "bottom" }"
k-series-defaults="{ type: "pie" }"
k-series="[{
field: "share",
categoryField: "resolution",
padding: 0
}]"
k-data-source="screenResolution"
k-series-hover="onSeriesHover"
></div>
</div>
<div class="box-col">
<h4>Console</h4>
<div class="console"></div>
</div>
</div>

</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope) {
$scope.onSeriesHover = function(e) {
kendoConsole.log(kendo.format("event :: seriesHover ({0} : {1})", e.category, e.value));
};

$scope.screenResolution = new kendo.data.DataSource({
transport: {
read: {
url: "../content/dataviz/js/screen_resolution.json",
dataType: "json"
}
},
filter: {
field: "year",
operator: "eq",
value: 2009
}
});
}
</script>
</div>


</body>
</html>