Question

我是Angular Charts的新手，并且不知道如何将端点JSON数据连接到图表。我按照AngularCharts中的说明使用粗略数据填充条形图。 HTML：

<div class="row">
    <div class="span12">
        <div class="widget widget-nopad">
            <div class="widget-header">
                <i class="icon-list-alt"></i>
                <h3> Skills</h3>
            </div>
            <!-- /widget-header -->
            <div class="widget-content" style="padding:5px;" ng-controller="BarCtrl">
            <canvas id="bar" class="chart chart-bar"
                        chart-data="data" chart-labels="labels"  chart-series="series">

                </canvas></div>
        </div>
    </div>


</div>

控制器：

myApp.controller('BarCtrl', ['$scope', 'reportServices', function ($scope, reportServices) {
    reportServices.getSkillsReport().then(function (result) {

        $scope.data = result.data;

        $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
    $scope.series = ['Series A', 'Series B'];

    $scope.data = [
      [65, 59, 80, 81, 56, 55, 40],
      [28, 48, 40, 19, 86, 27, 90]
    ];


    });
}]);

端点的输出是：

{
  ".Net": 4,
  "Java": 3,
  "JavaScript": 5,
  "ASP.NET": 2,
  "Banking": 2,
  "Personal Skills": 6
}

有人可以告诉我如何将这些数据连接到当前的默认条形图吗？另外，我不想要图表中的第二个系列栏。

Answer 1

假设您的端点对象是myobject：

var myobject = { ".Net": 4, "Java": 3, "JavaScript": 5, "ASP.NET": 2,"Banking": 2,"Personal Skills": 6}

$scope.labels = [];
$scope.series = ['Series A'];

$scope.data = []; 
$scope.datavalues = [];

for(i in myobject) {
   $scope.labels.push(i)
   $scope.datavlues.push(myobject[i])
}
$scope.data = [$scope.datavalues]

将角度条形图连接到端点数据

1 个答案: