Заполните диаграмму js с данными $ http.get()

Question

Попытка получить некоторые данные с веб-службы и отобразить их на диаграмме. Я решил, что диаграмма js будет хорошим средством для этого. (фактически используя tc-angular-chartjs). $http.get() вызов, я использую для теста:

$http.get('http://myjson.com/1chr1').success(function(data2) { 
    data2.forEach(function(r) { 
    $scope.labels.push(r.name); 
    $scope.scores.push(r.score); 
    }); 
}); 

и здесь весь JS файл для только кольцевой диаграммы:

'use strict'; 
angular 
    .module('app.doughnut', []) 
    .controller('DoughnutCtrl', function ($scope) { 
    $scope.labels = []; 
    $scope.scores = []; 

    $scope.data = [ 
     { 
     value: 700, 
     color:'#F7464A', 
     highlight: '#FF5A5E', 
     label: 'Red' 
     }, 
     { 
     value: 50, 
     color: '#46BFBD', 
     highlight: '#5AD3D1', 
     label: 'Green' 
     }, 
     { 
     value: 100, 
     color: '#FDB45C', 
     highlight: '#FFC870', 
     label: 'Yellow' 
     } 
    ]; 

    $scope.options = { 

     // Sets the chart to be responsive 
     responsive: true, 

     //Boolean - Whether we should show a stroke on each segment 
     segmentShowStroke : true, 

     //String - The colour of each segment stroke 
     segmentStrokeColor : '#fff', 

     //Number - The width of each segment stroke 
     segmentStrokeWidth : 2, 

     //Number - The percentage of the chart that we cut out of the middle 
     percentageInnerCutout : 50, // This is 0 for Pie charts 

     //Number - Amount of animation steps 
     animationSteps : 100, 

     //String - Animation easing effect 
     animationEasing : 'easeOutBounce', 

     //Boolean - Whether we animate the rotation of the Doughnut 
     animateRotate : true, 

     //Boolean - Whether we animate scaling the Doughnut from the centre 
     animateScale : false, 

     //String - A legend template 
     legendTemplate : '<ul class="tc-chart-js-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>' 

    }; 

    }); 

Проблема Я бегу в том, что большинство из этих примеров использования в том же формате, чтобы предоставить диаграмму с данными (статические данные с такими же ярлыками, как value/label/color/highlight).

Для моих потребностей цвета или выделения не имеют большого значения, но мне нужны данные, извлеченные из wesbervice, где значение, которое мне нужно для диаграммы, называется name, а метка для диаграммы называется score.

Так что я думал, что я мог бы сделать $http.get() вызов и поставить метки и оценки в 2-х различных массивов, а затем часть данных в JS будет выглядеть примерно так:

$scope.data = { 
    labels : ["option 1","option 2","option 3"], 
    values : [ 10, 20, 30 ], 
    datasets: [ value : values, color : #F7484A, highlight : #FF5A5E, label : labels] 
}; 

я видел что-то подобное сделать для диаграммы Chart.js, но не для графа пончика, и я не могу заставить его работать. Может быть, это невозможно?

Есть ли другие альтернативы? Я имею в виду, что я не могу быть единственным человеком, которому нужно отображать динамические данные в приятный отзывчивый график, но во всех примерах используются статические данные.

EDIT ANSWER Я принял совет dubhov. Также выяснилось, что моя ссылка на webservice была перепутана, поэтому я не получал никаких данных: p. Вот новые JS для будущей ссылки:

'use strict'; 
angular 
    .module('app.doughnut', []) 
    .controller('DoughnutCtrl', function($scope, $http) { 

    $http.get('https://api.myjson.com/bins/1chr1').success(function(data2) { 
     $scope.data = []; 
     data2.forEach(function(r) { 
     $scope.data.push({ 
      'value': r.score, 
      'color': '#F7464A', 
      'highlight': '#FF5A5E', 
      'label': r.name 
     }); 
     }); 
    }); 


    $scope.options = { 

     // Sets the chart to be responsive 
     responsive: true, 

     //Boolean - Whether we should show a stroke on each segment 
     segmentShowStroke: true, 

     //String - The colour of each segment stroke 
     segmentStrokeColor: '#fff', 

     //Number - The width of each segment stroke 
     segmentStrokeWidth: 2, 

     //Number - The percentage of the chart that we cut out of the middle 
     percentageInnerCutout: 50, // This is 0 for Pie charts 

     //Number - Amount of animation steps 
     animationSteps: 100, 

     //String - Animation easing effect 
     animationEasing: 'easeOutBounce', 

     //Boolean - Whether we animate the rotation of the Doughnut 
     animateRotate: true, 

     //Boolean - Whether we animate scaling the Doughnut from the centre 
     animateScale: false, 

     //String - A legend template 
     legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>' 

    }; 

    }); 

Answer 1

Chart.js ожидает, что данные должны быть отформатированы как это со статическими примерами. Не можете ли вы просто добавить объект в массив данных с необходимыми данными? Как это:

$scope.data.push({'value':r.score, 
        'label':r.name, 
        'color':'#RANDOMCOLOR', 
        'highlight':'#SLIGHTLYSHADEDRANDOMCOLOR'}); 

Что касается цветов, которые могут или не могут потребоваться по API (я думаю, что они будут), вы можете либо пойти случайным, или, если вы знаете, что ваш набор данных ограничен, вы можете выбрать из статического списка цветов. Вот некоторые идеи о randoms: https://stackoverflow.com/a/25709983/769971