出厂初始化时的角图错误

angular-chart errors during factory initialization

本文关键字：错误 初始化 出厂      更新时间：2023-09-26

我肯定我错过了一些东西，因为我不能得到角图初始化正确。工厂方法在全局工具提示初始化期间出错。angular-chart.js v.1.0.3的第30行Mode值。查看代码，这个错误似乎是合适的，因为此时工具提示的值是undefined。

Chart.defaults.global.tooltips.mode = 'label';

然而，似乎有很多成功，所以我确定是我。这是我的基本设置。

index . html 

<!DOCTYPE html>
<html ng-app="App">
<head>
    <script src="/lib/angular.min.js"></script>
    <script src="/lib/Chart.js"></script>
    <script src="/lib/angular-chart.js"></script>
    <script src="/app/main.js"></script>
</head>
<body ng-controller="RootCtrl">
    <!-- this is where content will be injected -->
    <div>
        <canvas id="averageDistance" class="chart chart-line" chart-data="data"
                    chart-labels="labels" chart-series="series" chart-options="options"
                    chart-dataset-override="datasetOverride" chart-click="onClick">
        </canvas>
    </div>
</body>
</html>

** main.js **

'use strict';
//create main module
angular.module('App', ['chart.js'])
    .controller('RootCtrl', ['$scope',
function ($scope) {
    $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);
    };
    $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
    $scope.options = {
        scales: {
            yAxes: [
                {
                    id: 'y-axis-1',
                    type: 'linear',
                    display: true,
                    position: 'left'
                },
                {
                    id: 'y-axis-2',
                    type: 'linear',
                    display: true,
                    position: 'right'
                }
            ]
        }
    };
}]);

以上配置/$scope属性取自http://jtblin.github.io/angular-chart.js/

这个页面甚至没有加载，因为angular应用在尝试创建chart.js模块时得到了一个注入器错误。我使用的是AngularJS v1.5.8, Chart.js v2.1.6和angular-chart.js v1.0.3。我遗漏了什么?

确保您已经引用了这3个库

(i) angular.js

(2) Chart.js

(3) angular-chart.js 

    https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js 
    https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js
    https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.0-alpha8/angular-chart.js

这是工作演示

相关文章：