Question

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

我已按照此url。

根据我的数据，我无法绘制图表。我是否需要在此更改代码。

任何人都可以帮我解决这个问题...

的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

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

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

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

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

1 个答案: