基本的AngularJS NVD3指令不起作用,也没有错误

发布时间：2020-12-17 18:02:43 所属栏目：安全来源：网络整理

导读：根据 their official setup我做了一个非常基本的,但它根本没有显示任何图表并且没有返回错误. 我不知道是因为我没有使用凉亭？我此刻很困惑.如果您需要更多信息,请告诉我.谢谢 ?php/** */?!doctype htmlmeta charset="utf-8"html head titleTest/title link

根据 their official setup我做了一个非常基本的,但它根本没有显示任何图表并且没有返回错误.

我不知道是因为我没有使用凉亭？我此刻很困惑.如果您需要更多信息,请告诉我.谢谢

<?php
/**
 */
?>
<!doctype html>
<meta charset="utf-8">
<html >
<head>
    <title>Test</title>

    <link rel="stylesheet" href="/library/nvd3js/1.1.15b/nv.d3.css">
    <script type="text/javascript" src="/library/angularjs/1.2.9/angular.js"></script>
    <script type="text/javascript" src="/library/d3js/3.4.11/d3.js"></script>
    <script type="text/javascript" src="/library/nvd3js/1.1.15b/nv.d3.js"></script>
    <script type="text/javascript" src="/library/angularjs/directives/nvd3ChartDirectives/0.0.7/angularjs-nvd3-directives.js"></script>
    <script>
        var app = angular.module("nvd3TestApp",['nvd3ChartDirectives']);

        function ExampleCtrl($scope){
            $scope.exampleData = [
                {
                    "key": "Series 1","values": [ [ 1025409600000,0],[ 1028088000000,-6.3382185140371],[ 1030766400000,-5.9507873460847],[ 1033358400000,-11.569146943813],[ 1036040400000,-5.4767332317425],[ 1038632400000,0.50794682203014],[ 1041310800000,-5.5310285460542],[ 1043989200000,-5.7838296963382],[ 1046408400000,-7.3249341615649],[ 1049086800000,-6.7078630712489],[ 1051675200000,0.44227126150934],[ 1054353600000,7.2481659343222],[ 1056945600000,9.2512381306992],[ 1059624000000,11.341210982529],[ 1062302400000,14.734820409020],[ 1064894400000,12.387148007542],[ 1067576400000,18.436471461827],[ 1070168400000,19.830742266977],[ 1072846800000,22.643205829887],[ 1075525200000,26.743156781239],[ 1078030800000,29.597478802228],[ 1080709200000,30.831697585341],[ 1083297600000,28.054068024708],[ 1085976000000,29.294079423832],[ 1088568000000,30.269264061274],[ 1091246400000,24.934526898906],[ 1093924800000,24.265982759406],[ 1096516800000,27.217794897473],[ 1099195200000,30.802601992077],[ 1101790800000,36.331003758254],[ 1104469200000,43.142498700060],[ 1107147600000,40.558263931958],[ 1109566800000,42.543622385800],[ 1112245200000,41.683584710331],[ 1114833600000,36.375367302328],[ 1117512000000,40.719688980730],[ 1120104000000,43.897963036919],[ 1122782400000,49.797033975368],[ 1125460800000,47.085993935989],[ 1128052800000,46.601972859745],[ 1130734800000,41.567784572762],[ 1133326800000,47.296923737245],[ 1136005200000,47.642969612080],[ 1138683600000,50.781515820954],[ 1141102800000,52.600229204305],[ 1143781200000,55.599684490628],[ 1146369600000,57.920388436633],[ 1149048000000,53.503593218971],[ 1151640000000,53.522973979964],[ 1154318400000,49.846822298548],[ 1156996800000,54.721341614650],[ 1159588800000,58.186236223191],[ 1162270800000,63.908065540997],[ 1164862800000,69.767285129367],[ 1167541200000,72.534013373592],[ 1170219600000,77.991819436573],[ 1172638800000,78.143584404990],[ 1175313600000,83.702398665233],[ 1177905600000,91.140859312418],[ 1180584000000,98.590960607028],[ 1183176000000,96.245634754228],[ 1185854400000,92.326364432615],[ 1188532800000,97.068765332230],[ 1191124800000,105.81025556260],[ 1193803200000,114.38348777791],[ 1196398800000,103.59604949810],[ 1199077200000,101.72488429307],[ 1201755600000,89.840147735028],[ 1204261200000,86.963597532664],[ 1206936000000,84.075505208491],[ 1209528000000,93.170105645831],[ 1212206400000,103.62838083121],[ 1214798400000,87.458241365091],[ 1217476800000,85.808374141319],[ 1220155200000,93.158054469193],[ 1222747200000,65.973252382360],[ 1225425600000,44.580686638224],[ 1228021200000,36.418977140128],[ 1230699600000,38.727678144761],[ 1233378000000,36.692674173387],[ 1235797200000,30.033022809480],[ 1238472000000,36.707532162718],[ 1241064000000,52.191457688389],[ 1243742400000,56.357883979735],[ 1246334400000,57.629002180305],[ 1249012800000,66.650985790166],[ 1251691200000,70.839243432186],[ 1254283200000,78.731998491499],[ 1256961600000,72.375528540349],[ 1259557200000,81.738387881630],[ 1262235600000,87.539792394232],[ 1264914000000,84.320762662273],[ 1267333200000,90.621278391889],[ 1270008000000,102.47144881651],[ 1272600000000,102.79320353429],[ 1275278400000,90.529736050479],[ 1277870400000,76.580859994531],[ 1280548800000,86.548979376972],[ 1283227200000,81.879653334089],[ 1285819200000,101.72550015956],[ 1288497600000,107.97964852260],[ 1291093200000,106.16240630785],[ 1293771600000,114.84268599533],[ 1296450000000,121.60793322282],[ 1298869200000,133.41437346605],[ 1301544000000,125.46646042904],[ 1304136000000,129.76784954301],[ 1306814400000,128.15798861044],[ 1309406400000,121.92388706072],[ 1312084800000,116.70036100870],[ 1314763200000,88.367701837033],[ 1317355200000,59.159665765725],[ 1320033600000,79.793568139753],[ 1322629200000,75.903834028417],[ 1325307600000,72.704218209157],[ 1327986000000,84.936990804097],[ 1330491600000,93.388148670744]]
                }];

        }
    </script>

</head><body ng-app="nvd3TestApp">
123
<div ng-controller="ExampleCtrl">
        Here
        <nvd3-line-chart 
            data="exampleData"
            showXAxis="true"
            showYAxis="true"
            tooltips="true"
            interactive="true">
        </nvd3-line-chart>
    <!-- </div></div> -->

<!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->

<!-- TEST SECTION -->
<pre>exampleData Model: {{exampleData | json}}</pre>

<!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->

</div>

</body></html>

解决方法

我同意你的意见,它在几个月之后仍然没有工作(如果我按照基本步骤,在github上快速入门指南).我正在研究一段时间,我已经改变了一些库的链接然后我得到了它.

因此,我肯定会说问题是图书馆的链接

我正在使用最基本的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">                

        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.9/d3.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.13-beta/nv.d3.min.js"></script>
        <script src="http://cmaurer.github.io/angularjs-nvd3-directives/lib/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.js"></script>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.css"/>

        <script>
            var app = angular.module("nvd3TestApp",['nvd3ChartDirectives']);

            function ExampleCtrl($scope) {
                $scope.exampleData = [
                    {
                        "key": "Series 1","values": [[1025409600000,[1028088000000,[1030766400000,[1033358400000,[1036040400000,[1038632400000,[1041310800000,[1043989200000,[1046408400000,[1049086800000,[1051675200000,[1054353600000,[1056945600000,[1059624000000,[1062302400000,[1064894400000,[1067576400000,[1070168400000,[1072846800000,[1075525200000,[1078030800000,[1080709200000,[1083297600000,[1085976000000,[1088568000000,[1091246400000,[1093924800000,[1096516800000,[1099195200000,[1101790800000,[1104469200000,[1107147600000,[1109566800000,[1112245200000,[1114833600000,[1117512000000,[1120104000000,[1122782400000,[1125460800000,[1128052800000,[1130734800000,[1133326800000,[1136005200000,[1138683600000,[1141102800000,[1143781200000,[1146369600000,[1149048000000,[1151640000000,[1154318400000,[1156996800000,[1159588800000,[1162270800000,[1164862800000,[1167541200000,[1170219600000,[1172638800000,[1175313600000,[1177905600000,[1180584000000,[1183176000000,[1185854400000,[1188532800000,[1191124800000,[1193803200000,[1196398800000,[1199077200000,[1201755600000,[1204261200000,[1206936000000,[1209528000000,[1212206400000,[1214798400000,[1217476800000,[1220155200000,[1222747200000,[1225425600000,[1228021200000,[1230699600000,[1233378000000,[1235797200000,[1238472000000,[1241064000000,[1243742400000,[1246334400000,[1249012800000,[1251691200000,[1254283200000,[1256961600000,[1259557200000,[1262235600000,[1264914000000,[1267333200000,[1270008000000,[1272600000000,[1275278400000,[1277870400000,[1280548800000,[1283227200000,[1285819200000,[1288497600000,[1291093200000,[1293771600000,[1296450000000,[1298869200000,[1301544000000,[1304136000000,[1306814400000,[1309406400000,[1312084800000,[1314763200000,[1317355200000,[1320033600000,[1322629200000,[1325307600000,[1327986000000,[1330491600000,93.388148670744]]
                    }];

            }</script>

    </head>

    <body ng-app='nvd3TestApp'>
        <div ng-controller="ExampleCtrl">
            <nvd3-line-chart
                data="exampleData"
                showXAxis="true"
                showYAxis="true"
                tooltips="true"
                interactive="true">
            </nvd3-line-chart>

        </div>
    </body>

</html>

并链接到jsfiddle

http://jsfiddle.net/ackuser/298n6do5/#base

希望这有帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!