Ваши данные для визуализации Круговая диаграмма не соответствует формату документа Highchart.Вы можете увидеть демо круговой диаграммы здесь https://www.highcharts.com/demo/pie-basic, чтобы знать.
Структура series:
series: [{
data: [{
name: 'Chrome',
y: 61.41
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}]
}]
Ваш ответ API-ответа в формате [{ '3': 10 }, { '4': 60 }, { '5': 30 }];Таким образом, вы можете исправить это на сервере (изменить значение ответа API) или изменить формат ответа на клиенте (просто):
const dataChart = myData.map(d => {
const name = Object.keys(d)[0];
return { name, y: d[name] }
})
и
series: [{
data: dataChart
}]
Вы должны также указать свой угловойприложение angular.module('myApp', []), прежде чем использовать его с angular.module('myApp').controller('myCtrl', ....Я думаю, что вы заявили об этом, поэтому я не думаю, что это ошибка.
Я создал демо с простым API на http://5c1b231ee193d000132a73a8.mockapi.io/api/53860059. И это демо на jsfiddle https://jsfiddle.net/huynhsamha/fd80g7rp/
Вы также можете запустить его по фрагменту здесь:
angular.module('myApp', []).controller('myCtrl', ['$scope', '$http', function ($scope, $http) {
const fetchData = function () {
const url = 'https://5c1b231ee193d000132a73a8.mockapi.io/api/53860059';
$http({ method: 'GET', url })
.then(function (response) {
const myData = response.data;
console.log(myData);
const dataChart = myData.map(d => {
const name = Object.keys(d)[0];
return { name, y: d[name] }
})
console.log(dataChart);
const chartConfig = {
chart: {
type: 'pie'
},
title: {
text: 'My Pie Chart'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
data: dataChart
}]
};
Highcharts.chart('mypie', chartConfig);
}, function (err) {
console.log(err);
});
};
fetchData();
}]);
<html ng-app="myApp">
<body>
<div ng-controller="myCtrl" class="wrapper">
This is my Pie Chart:
<br>
<div id="mypie"></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
</html>