angularjs – 未定义显示错误图表的Angular chart.js

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

导读：我是棱角分明的新手.当我尝试执行以下代码时.它在控制台中显示一些错误. ReferenceError：图表未定义.我无法理解错误.所以有人请帮助我.如果问题不正确,请更正问题我的Html代码： !DOCTYPE htmlhtml lang="en" head meta charset="utf-8" / titleschool/tit

我是棱角分明的新手.当我尝试执行以下代码时.它在控制台中显示一些错误. ReferenceError：图表未定义.我无法理解错误.所以有人请帮助我.如果问题不正确,请更正问题

我的Html代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>school</title>
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <link rel="stylesheet" href="fonts/text-font/css/font_icon.css" type="text/css"/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0" />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <!-- angular -->
        <script type="text/javascript" src="js/angular/angular.min.js"></script>
        <!-- angular chart -->
        <link rel="stylesheet" href="js/angular/angular-chart.css" type="text/css"/>
        <script type="text/javascript" src="js/angular/angular-chart.min.js"></script><br />
        <script type="text/javascript" src="js/angular/angular.js"></script>

        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body ng-app="app">
        <div ng-controller="LineCtrl">
                <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" 
                chart-legend="true" chart-series="series" chart-click="onClick"></canvas> 

            </div>
    </body >
</html>

我的angular.js：

angular.module("app",["chart.js"]) 
  // Optional configuration
  .config(['ChartJsProvider',function (ChartJsProvider) {
    // Configure all charts
    ChartJsProvider.setOptions({
      colours: ['#FF5252','#FF8A80'],responsive: false
    });
    // Configure all line charts
    ChartJsProvider.setOptions('Line',{
      datasetFill: false
    });
  }])
  .controller("LineCtrl",['$scope','$timeout',function ($scope,$timeout) {

  $scope.labels = ["January","February","March","April","May","June","July"];
  $scope.series = ['Series A','Series B'];
  $scope.data = [
    [65,59,80,81,56,55,40],[28,48,40,19,86,27,90]
  ];
  $scope.onClick = function (points,evt) {
    console.log(points,evt);
  };

  // Simulate async data update
  $timeout(function () {
    $scope.data = [
      [28,90],[65,40]
    ];
  },3000);
}]);

解决方法

我把我在评论中提到的更正,ng-app和ng-directives都丢失了.

的index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>school</title>
        <link rel="stylesheet" href=
  "http://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.css" type=
  "text/css" />
  <script src="http://cdn.rawgit.com/nnnick/Chart.js/master/Chart.min.js" type=
  "text/javascript">
</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"
  type="text/javascript">
</script>
  <script src=
  "http://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.js"
  type="text/javascript">
</script>

        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body ng-app="app">
      <div ng-controller="LineCtrl">
        <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" 
                    chart-legend="true" chart-series="series" chart-click="onClick"></canvas> 
        </div>
    </body>
</html>

的script.js

angular.module("app",["chart.js"]) // here i couldn't understand about chart.js fil
  // Optional configuration
  .config(['ChartJsProvider',3000);
}]);

我为它做了一个jsbin.

（编辑：李大同）

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