使用angularjs-nvd3-指令顯示圖表不起作用

Question

所以我做了一個簡單的Angular-nvd3項目。 我正在使用此Github庫（angularjs-nvd3-指令）中的liveData.example。 為了使用我的REST API，我對其進行了一些改進。

這是我的REST API：

http://amr2.mybluemix.net/getmet/list

這是我的代碼：

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title>Angular.js nvd3.js Live Data Chart Example</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF8">
    <script src="js/angular.js"></script>
    <script src="js/d3.js"></script>
    <script src="js/nv.d3.js"></script>
    <script src="js/moment.js"></script>
    <script src="dist/angularjs-nvd3-directives.js"></script>
    <link rel="stylesheet" href="nv.d3.css"/>
    <script>
        var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);

        app.config(['$httpProvider', function($httpProvider) {
            $httpProvider.defaults.useXDomain = true;
            delete $httpProvider.defaults.headers.common['X-Requested-With'];
            }
        ]);


        app.factory('DataMeterDetail', ['$http', function($http){
                var getData = function(_id, _rev){
                    return $http({
                        method: 'JSONP',
                        url: 'http://amr2.mybluemix.net/getmet/list'
                    });
                }
                return{
                    getDataDetail: function(_id, _rev){return getData(_id, _rev);}
                }
        }]);

        app.factory('DataMeter', function(){
           return {
               cityId: 0,
               units: 'imperial'
           }
        });

        function ExampleCtrl($scope, DataMeterDetail, DataMeter){
            function fetchData(){
                DataMeterDetail.getDataDetail(5506956, 'imperial')
                        .success(function(response){
                            console.log(response);
                            var dta = [{key:"100010001_20082015_0", values:[]}];
                                dta[0].values = response.list.map(function(d){
                                return [d._id, d._rev];
                            });
                            $scope.exampleData = dta;
                        });
            }

            fetchData();

            $scope.xAxisTickFormatFunction = function(){
                return function(d){
                    return d3.time.format('%x-%H:%M')(new Date(d*1000));
                }
            }


        }
    </script>
    <style>
        div{
            font-family: sans-serif;
        }
    </style>
</head>
<body ng-app='nvd3TestApp'>

<div ng-controller="ExampleCtrl">

    <input type="text" ng-model="cityName"/>

    <div>Example Data</div> </div>
    <nvd3-line-chart
            data="exampleData"
            id="exampleId"
            width="800"
            height="400"
            showXAxis="true"
            showYAxis="true"
            tooltips="true"
            interactive="true"
            xAxisTickFormat="xAxisTickFormatFunction()"
            margin="{left:100,top:20,bottom:20,right:10}"
            yAxisLabel="Temperature (F)"
            xAxisLabel="Date"
            >
        <svg></svg>
    </nvd3-line-chart>
</div>

</body>
</html>

現在代碼不起作用。 你們能告訴我這段代碼有什么問題嗎？ 提前致謝。

Answer 1

也許這可以幫助解決該問題。.上面提到的我遇到了相同的問題。

我的代碼段如下。 只需在計時器功能中使用$ scope.apply ..

setInterval(function(){
        $scope.$apply(function(){
          //  var data= $scope.exampleData;
            $scope.exampleData = data;
          //   console.log( 'Client ON ### setInterval called!!  ' ,            $scope.exampleData[0].values[0]);
        });
    }, 200);  // 0.2 sec

使用angularjs-nvd3-指令顯示圖表不起作用

問題描述

1 個解決方案

解決方案1
0 2015-11-16 07:54:08

使用angularjs-nvd3-指令顯示圖表不起作用

問題描述

1 個解決方案

解決方案1 0 2015-11-16 07:54:08

解決方案1
0 2015-11-16 07:54:08