Angular-nvD3(krispo) 带有 ng-repeat 的单线图

Question

我正在尝试使用 ng-repeat 从名为 $scope.dataset 的数组中呈现不同的图表，但它没有发生。

<div ng-repeat="data in dataset">
   <nvd3 options="options" data="data" class="with-3d-shadow with-transitions"></nvd3>
</div>

但我在 firefox 控制台中得到了这个-

Error: a.map is not a function

所以我尝试将相同的代码放入他们的 plunkr - linechart-nvd3，但也没有用。然而，当我使用整个数组即 $scope.dataset 而不是使用 ng-repeat 时，图形会呈现。任何帮助，将不胜感激。谢谢。

Answer 1

在您的 sinAndCos() 方法中尝试此代码：

//Line chart data should be sent as an array of series objects.
            return [
                [{
                    values: sin,      //values - represents the array of {x,y} data points
                    key: 'Sine Wave', //key  - the name of the series.
                    color: '#ff7f0e',  //color - optional: choose your own line color.
                    strokeWidth: 2,
                    classed: 'dashed'
                }],
                [{
                    values: cos,
                    key: 'Cosine Wave',
                    color: '#2ca02c'
                }],
                [{
                    values: sin2,
                    key: 'Another sine wave',
                    color: '#7777ff',
                    area: true      //area - set to true if you want this line to turn into a filled area chart.
                }]
            ];

因此，将相同的代码放入您的 plunkr - http://plnkr.co/edit/lBKFld?p=preview。

注意：Angular-nvD3 图表您必须发送对象数组。在这里，我将每个元素作为对象数组发送。现在如果你使用 ng-repeat 那么它会完美地工作。

Angular-nvD3(krispo) 带有 ng-repeat 的单线图

Angular-nvD3(krispo) single line chart with ng-repeat

javascript

linechart

angularjs

angularjs-ng-repeat

angular-nvd3