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 - ＆gt; 17:16 .....，如何显示17：14,17：15等。

Answer 1

经过多个博客后，cumulativeLineChart存在一些问题，所以我切换到lineChart，无需更改json结构中的任何内容。

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

使用negative y-axis，linechart密谋的问题已经消失。

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',                 
                    }
                }

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

1 个答案: