Question

我确定我错过了一些东西，因为我无法正确地初始化角度图表。在angular-chart.js v.1.0.3第30行的全局tooltips.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/

该页面甚至无法加载，因为在尝试创建chart.js模块时，角度App会出现注入器错误。我使用的是AngularJS v1.5.8，Chart.js v2.1.6和angular-chart.js v1.0.3。我在这里缺少什么？

Answer 1

确保您已提及这3个图书馆

（ⅰ）angular.js

（ⅱ）chart.js之

（ⅲ）角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

以下是工作 DEMO

工厂初始化期间的角度图表错误

1 个答案: