Question

我试图用AngularJS和NVD3制作图表。但我不断收到错误。

此处index.html：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        div.square {
            background-color: #ccc;
            height: 400px;
            width: 400px;
            margin: 10px;
        }
    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.js"></script>
    <script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="item in items">
    <br>
    <form id="{{'customize-chart-' + item.number}}" novalidate>
        <textarea rows="5" cols="50" placeholder="Paste comma-separated data here." ng-model="textModel"></textarea>
        <br>
        <button id="{{'update-chart-' + item.number}}" ng-click="updateChart(item.number)">Update chart</button>
    </form>
  </div>
  <div ng-repeat="item in items">
    <div class="square">
        <nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>
    </div>
  </div>
</body>
</html>

此处app.js＆＃34;

var app=    angular.module("myApp",["nvd3"]);
app.controller("myCtrl",function($scope){
    $scope.items=   [
        {
            hed: '',
            subhed: '',
            number: chNum
        }
    ];

    $scope.textModel=   '';

    $scope.updateChart= function(passedItemNumber){
        var csvData=    d3.csv.parse(this.textModel);
        var headers=    d3.keys(csvData[0]);
        var nvd3Obj=    {};

        headers.forEach(function(d){
            nvd3Obj[d]= [];
        });

        csvData.forEach(function(d){
            for(var key in d){
                nvd3Obj[key].push(d[key]);
            }
        });

        $scope.options = {
            "chart": {
                "type": "lineChart",
                "height": 400,
                "margin": {
                    "top": 20,
                    "right": 20,
                    "bottom": 40,
                    "left": 55
                },
                "x": function(d) {
                    console.log(d);
                    return d[0];
                },
                "y": function(d) {
                    return d[1];
                },
                "useInteractiveGuideline": true,
                "dispatch": {},
                "xAxis": {
                    "axisLabel": "X axis"
                },
                "yAxis": {
                    "axisLabel": "Y axis"//,
                    // "axisLabelDistance": -10
                }
            }
        };

        $scope.data=    nvd3Obj;
    };
});

这是我粘贴到textarea代码中的内容。

date,dow,sp500,nasdaq
1/1/16,10,15,8
1/3/16,5,3,7
1/5/16,12,18,12

当我将其粘贴到textarea时，然后点击＆＃34;更新图表＆＃34; button，此错误会出现在我的浏览器控制台中。

angular.js:14290 TypeError: a.map is not a function
    at nv.d3.min.js:5
    at g (nv.d3.min.js:2)
    at update (nv.d3.min.js:2)
    at SVGSVGElement.<anonymous> (nv.d3.min.js:4)
    at d3.min.js:3
    at Y (d3.min.js:1)
    at Array._a.each (d3.min.js:3)
    at Array.b (nv.d3.min.js:4)
    at Array._a.call (d3.min.js:3)
    at Object.updateWithData (angular-nvd3.js:229)

错误未引用我的脚本app.js。我的代码中有什么导致此错误？我该如何解决？

Answer 1

我可以通过告诉您nvd3Obj需要成为数组来告诉您当前的错误。现在，如果您使用（a，b，c \ n1,2,3）作为CSV数据，则会在字符串“1”上出现“无法创建属性'系列'的新错误。

编辑：我通过使用x，y属性创建值对象来克服第二个错误。 { x: d[k], y: 0 }。希望这将有助于您回到解决其余问题。这是我用过的代码的plnkr。 http://plnkr.co/edit/q1apvHlChaXvdsqzlXlM?p=preview

    var csvData=    d3.csv.parse(this.textModel);
    var headers=    d3.keys(csvData[0]);
    var nvd3Obj=    [];
    headers.map(function (heading, index) {
      nvd3Obj[index] = { "key": heading };
    })
    csvData.forEach(function(d){
        for(var k in d){
            for(var i = 0; i < nvd3Obj.length; i++) {
              var obj = nvd3Obj[i];
              if (obj.key === k) {
                if (!obj.values) {
                  obj.values = [{ x: d[k], y: 0 }];
                } else {
                  obj.values.push({ x: d[k], y: 0 });
                }
                break;
              }
            }
        }
    });

尝试制作NVD3图表时，“a.map不是函数”错误

1 个答案: