用$ http.get（）數據填充Chart js

Question

嘗試從Web服務中獲取一些數據並將其顯示在圖表中。 我認為圖表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條形圖完成了類似的操作，但對於甜甜圈圖卻看不到，而且似乎無法正常工作。 也許不可能嗎？

還有其他選擇嗎？ 我的意思是我不是唯一需要將動態數據顯示為漂亮的響應式圖表的人，但是所有示例都使用靜態數據。

編輯答復我接受了杜波夫的建議。 還發現我的網絡服務鏈接被弄亂了，所以我沒有得到任何數據：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可能需要或可能不需要的顏色（我認為它們是必需的），您可以隨機選擇，或者如果您知道數據集有限，則可以從靜態顏色列表中進行選擇。 這是一些關於隨機的想法： https ://stackoverflow.com/a/25709983/769971