如何在 angular 指令内绘制 nvd3 折线图

Question

如何使用 nvd3 angular 指令绘制折线图。

我关注了这个url。

根据我的数据，我无法绘制 graph.Do 我需要更改此处的代码。

谁能帮我解决这个问题...

Myscope:

 $scope.data = [{
                "x": "2015-10-01",
                "y": "244"
    },
            {
                "x": "2015-07-01",
                "y": "0"
    },
            {
                "x": "2015-06-01",
                "y": "117"
    },
            {
                "x": "2015-05-01",
                "y": "5353"
    },
            {
                "x": "2015-04-01",
                "y": "11159"
    },
            {
                "x": "2015-03-01",
                "y": "7511"
    },
            {
                "x": "2015-02-01",
                "y": "6906"
    },
            {
                "x": "2015-01-01",
                "y": "10816"
    },
            {
                "x": "2014-12-01",
                "y": "3481"
    },
            {
                "x": "2014-11-01",
                "y": "1619"
    },
            {
                "x": "2014-10-01",
                "y": "4084"
    },
            {
                "x": "2014-09-01",
                "y": "1114"
    }];

$scope.options = {
        chart: {
            type: 'lineChart',
            height: 450,
            margin: {
                top: 20,
                right: 20,
                bottom: 40,
                left: 55
            },
            x: function (d) { return d.x; },
            y: function (d) { return d.y; },
            useInteractiveGuideline: true,
            xScale: d3.time.scale(),
            "xAxis": {
             "axisLabel": "Months (ms)"
             },
            "yAxis": {
                "axisLabel": "WW (v)",
                "axisLabelDistance": -10
            }
            xAxis: {
                axisLabel: 'Months',
                ticks: d3.time.months,
                tickFormat: function (d) {                    

                    return d3.time.format('%Y %b')(new Date(d));

                }
            },
            yAxis: {
                axisLabel: 'WW',
                tickFormat: function (d) {


                    if (d == null) {
                        return 0;
                    }

                    return d3.format('.02f')(d);
                },
                axisLabelDistance: 30
            }
        }
    };

我的html:

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

Answer 1

问题不是很清楚，我会尽力帮助你

如果你想将 angular 与 nd3.js 一起使用，找到一些模块比帮助你这样做更容易 https://github.com/krispo/angular-nvd3
如果您知道它并且只想创建一个看起来像问题中的 link 的图表，您可以使用 angular-nvd3 模块（是的 link上面）指令是
```
<nvd3 options="options" data="data"></nvd3>
```

你可以看到这个plunker http://plnkr.co/edit/lBKFld?p=preview 它具有您想要的 angular 和 nvd3.js 图表，您只需更改选项和数据即可满足您的需求（plunker来自模块）希望对你有帮助。

如何在 angular 指令内绘制 nvd3 折线图

How to draw a nvd3 line chart inside an angular directive

angularjs

nvd3.js