Использование tc-angular-chartjs Im способно заставить круговую диаграмму функционировать, но havent смог выяснить, как суммировать значения меток для правильной отображения. Кроме того, я могу заставить гистограмму работать с использованием своего примера, но не с внешними данными через ajax-вызов.
Примечание: Im новый как для angularjs, так и для javascript, поэтому я, возможно, пропустил что-то простое здесь, но я пытался понять это в течение нескольких дней без везения.
Пример диаграммы Пример: я использую фабрику и рестангляр для получения внешних данных, и это работает.
ПРОБЛЕМА № 1
Чтобы вычислить значения элементов, Ive попробовал несколько ссылок, найденных Ive, но не повезло, чтобы включить их в диаграмму. Это одна из рекомендаций, которую я попытался. большинство из них - это отклонения от этого, которые видели: появление элементов массива
Фрагмент кода для диаграммы:
services.forEach(function(service) {
data.push({
'value': incident.service.name.length, // Need to calculate sum of each 'label: service' element. [Used .length to get test value]
'color': colors.getRandom(), // This works, but need colors to be same for ea. service name
'highlight': 'brown',
'label': incident.service.name
});
$scope.data = data;
//console.log($scope.data);
});
Пример вывода данных:
Array[65]
0: Object
color: "orange"
highlight: "brown"
label: "Service1"
value: 36
__proto__: Object
1: Object
color: "navy"
highlight: "brown"
label: "Service1"
value: 40
__proto__: Object
2: Object
color: "green"
highlight: "brown"
label: "Service2"
value: 40
3: Object
color: "blue"
highlight: "brown"
label: "Service3"
value: 20
etc ..
HTML:
<div class="chart" ng-controller="chartController" style="margin-top:20px;">
<canvas tc-chartjs-pie chart-options="options" chart-data="data" auto-legend></canvas>
</div>
Бар-диаграмма работает только с использованием примера на своем сайте.
ПРОБЛЕМА № 2 - я исследую этот
Пытаясь получить ниже, я получаю: TypeError: Не могу прочитать свойство "длина" неопределенного
Фрагмент кода:
//Данные Chart.js
services.forEach(function(service) {
data.push({
label: incident.service.name,
fillColor: 'rgba(220,220,220,0.5)',
strokeColor: 'rgba(220,220,220,0.8)',
highlightFill: 'rgba(220,220,220,0.75)',
highlightStroke: 'rgba(220,220,220,1)',
data: incident.service.name.length
});
$scope.data = data;
//console.log($scope.data);
});
У меня недостаточно комментариев, чтобы добавить комментарий, поэтому я помещаю его в ответ
Каково значение incident
переменной? Это исходит от асинхронной службы, она жестко запрограммирована или это от синхронного вычисления?
Я распечатал значение incident
перед циклом, чтобы вы могли понять, что там до цикла.
Кроме того, какова структура service
внутри forEach? Можно ли использовать его в цикле как incident[service].name
?
Если я понимаю, что вы пытаетесь сделать, вот что вам нужно сделать:
incident[service].name.length
Однако я мог бы неправильно истолковать ваш вопрос. Если да, дайте мне знать.
У вас, вероятно, пока нет данных, прежде чем вы начнете обработку. Поэтому, если вы используете ajax для извлечения, убедитесь, что данные присутствуют, прежде чем вы начнете цикл forEach.