Question

我试图从我的JSON对象中显示discreteBarChart。当我尝试一个静态的例子时，它运作良好，但动态地它不起作用。

注意：我想在我的html代码中使用我的objectData而不是数据范围这是我的代码：

JS代码：

var app = angular.module('plunker', ['nvd3']);




 app.factory('getObjectService', function( $http){
  return {
    getObject : function() {

      return $http.get('http:/..');
    }

  }     
})

app.controller('MainCtrl', function($scope,getObjectService) {
  $scope.options = {
            chart: {
                type: 'discreteBarChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 50,
                    left: 55
                },
                x: function(d){return d.label;},
                y: function(d){return d.number + (1e-10);},
                showValues: true,
                valueFormat: function(d){
                    return d3.format(',.4f')(d);
                },
                duration: 500,
                xAxis: {
                    axisLabel: 'X Axis'
                },
                yAxis: {
                    axisLabel: 'Y Axis',
                    axisLabelDistance: -10
                }
            }
        };



    getObjectService.getObject().then(function(resp) {
    $scope.myObject = resp.data.items;

  }, function(err) {
    console.error('ERR', err);
  })    




       $scope.data = [
            {
                key: "Cumulative Return",
                values: [
                    {
                        "label" : "A" ,
                        "number" : 29.765957771107
                    } ,
                    {
                        "label" : "B" ,
                        "number" : 33.765957771107
                    } ,
                    {
                        "label" : "C" ,
                        "number" : 38.765957771107
                    } 

                ]
            }
        ]
});

HTML code：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>Angular-nvD3  Discrete Bar Chart</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

    <nvd3 options="options" data="data"></nvd3>

    <!-- here i want  to use my object and not the data scope -->
    <nvd3 options="options" data="myObject"></nvd3>

    <br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
  </body>

</html>

有什么建议吗？

如何使用NVD3显示带有Json数据的discreteBarChart

0 个答案: