我想使用$http.get
将与this link相同的高位图与Restful API集成在一起,由于$scope.pieData
在成功函数中,因此它不起作用:
app.directive('hcPieChart', function () {
return {
restrict: 'E',
template: '<div></div>',
scope: {
title: '@',
data: '='
},
link: function (scope, element) {
Highcharts.chart(element[0], {
chart: {
type: 'pie'
},
title: {
text: scope.title
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: scope.data
}]
});
}
};
})
app.controller('myCtrl', function($scope, $http) {
$http({
method: 'Get',
url: 'http://localhost:2195/api/charts',
}).success(function(data, status , header, config) {
// Sample data for pie chart
$scope.pieData = [
{
name: "Sent SMSs",
selected: true,
y: data[0].sentSMS
},
{
name: "Not Sent",
y: data[0].notSentSMS,
sliced: true,
},
{
name: "Delivered",
y: data[0].deliveredSMS
},
{
name: "Not Delivered",
y: data[0].notDeliveredSMS,
selected: false
}
];
}
}); // End of Controller
这是JSFiddle link(由于服务链接,它不起作用)。
任何人都可以帮忙。
最佳答案
Jimmy是对的,您的问题是图表呈现,然后成功函数得到响应
以防止您必须创建标志并使用ng-if,因此html将会像这样
<hc-pie-chart ng-if="flag" data = "pieData" title="Manual Campaigns" >Placeholder for Manual Campaigns pie chart</hc-pie-chart>
而JS将是这样的:
$scope.flag = false;
$http.get("http://localhost:2195/api/charts")
.then(function(response) {
console.log(response);
$scope.pieData = [
{
name: "Sent SMSs",
selected: true,
y : response.data[0].sentSMS
},
{
name: "Not Sent",
y: response.data[0].notSentSMS,
sliced: true,
},
{
name: "Delivered",
y:response.data[0].delivered
},
{
name: "Not Delivered",
y: response.data[0].notDelivered,
selected: false
}
]
console.log($scope.pieData);
$scope.flag = true; //set the flag equal true to show it
});