RestAngular - Angular - NVD3 - CumulativeLineChart - 绘制 y 轴和 x 轴

Question

我是 Restangular 的新手并使用 angular-nvd3 图表 api。

我有RestService，它以以下格式返回 Json 响应。

3 不同的线将绘制在单个图表上。

键 - 名称，如 A、B、C 值 - 毫秒，订单/秒

x 轴 - Date（从毫秒转换）

y 轴 - orders/sec

JSON

[
    {
        "key": "A",
        "values": [
            [
                1447673334646,
                17
            ],                           
            [
                1447673634646,
                22
            ],
            [
                1447673694646,
                19
            ],
            [
                1447673754646,
                7
            ],
            [
                1447673814646,
                7
            ],
            [
                1447673874646,
                15
            ],               
        ]
    },
    {
        "key": "B",
        "values": [
            [
                1447673334646,
                14
            ],               
            [
                1447673694646,
                17
            ],               
            [
                1447674054646,
                23
            ]
        ]
    },
    {
        "key": "C",
        "values": [
           [
                1447673694646,
                5
            ],
            [
                1447673754646,
                12
            ],
            [
                1447673814646,
                12
            ],                
            [
                1447673994646,
                7
            ],
            [
                1447674054646,
                18
            ]
        ]
    }
]

使用的数据结构 - List<String , List<List<Long>>>

我正在使用下面绘制图表

脚本代码

<script>

        angular.module('nvd3TestApp', ['nvd3','restangular']).config(function(RestangularProvider){
            RestangularProvider.setBaseUrl('myUrl')}).controller('MainCtrl', function($scope,Restangular) {

      var refreshInterval = 10 * 1000;
      var allCmnts = Restangular.all("getData");

     $scope.fetchData2 = function() {
      allCmnts.getList().then(function(response){
            $scope.data = response;
              });


           $scope.options = {
            chart: {
                type: 'cumulativeLineChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 60,
                    left: 65
                },
                x: function(d){ return d[0]; },
                y: function(d){ return d[1]; },
                color: d3.scale.category10().range(),
                useInteractiveGuideline: true,


                xAxis: {
                    axisLabel: 'Time In Minutes',
                    tickFormat: function(d) {
                        return d3.time.format('%H:%M')(new Date(d))
                    },
                    showMaxMin: false,

                },

                yAxis: {
                    axisLabel: 'ORDERS',
                    tickFormat: function(d){
                        return d;
                    },

                }
            }
        };
    }

            setInterval(function() {
                $scope.$apply(function() {
                $scope.fetchData2();
                $scope.api.refresh();
                })
            }, refreshInterval);

            $scope.fetchData2();
        });
    </script>

HTML

<div ng-app ="nvd3TestApp">
    <div ng-controller="MainCtrl">
     <nvd3 options="options" data="data"></nvd3>
</div>
</div>

我面临的问题

1.) 上面的代码运行良好，没有脚本错误，什么都没有。图表正在显示。

2.) Y 轴未正确绘制，值以小数形式出现，但显示的响应返回 Long values。

3.) y 轴显示负图

4.) x 轴不是以连续方式绘制的，即 17:13 -> 17:16.....，如何显示 17:14、17:15 等。

Answer 1

浏览了多个博客，cumulativeLineChart存在一些问题，所以我切换到lineChart，不需要更改任何json结构。

在 Somme 下面我为绘制 x 轴和 y 轴做了更多更改。

使用linechart 解决了negative y-axis 绘图的问题。

xAxis: {
                        axisLabel: 'Time In Minutes',
                        tickFormat: function(d) {
                            return d3.time.format('%H:%M')(new Date(d))
                        },
                        orient: 'bottom',
                        tickPadding: 0,
                        rotateLabels: -45,
                        axisLabelDistance: 1,
                        ticks: xlength,
                    },

                    yAxis: {
                        axisLabel: 'data',
                        tickFormat: function(d){
                            return d;
                        },
                        orient: 'left',                 
                    }
                }