在HotTowel和Angular.js中使用chart.js

Question

我正在嘗試在HotTowel項目中使用折線圖示例 ，但它不會返回任何結果。 這是我的儀表板代碼：

(function () {
    'use strict';
    var controllerId = 'dashboard';
    angular.module('app').controller(controllerId, ['common', 'datacontext', dashboard]);

    function dashboard(common, datacontext) {
        var getLogFn = common.logger.getLogFn;
        var log = getLogFn(controllerId);

        var vm = this;
        vm.news = {
            title: 'Hot Towel Angular',
            description: 'Hot Towel Angular is a SPA template for Angular developers.'
        };
        vm.messageCount = 0;
        vm.people = [];
        vm.title = 'Dashboard';

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

        activate();

        function activate() {
            var promises = [getMessageCount(), getPeople()];
            common.activateController(promises, controllerId)
                .then(function () { log('Activated Dashboard View'); });
        }

        function getMessageCount() {
            return datacontext.getMessageCount().then(function (data) {
                return vm.messageCount = data;
            });
        }

        function getPeople() {
            return datacontext.getPeople().then(function (data) {
                return vm.people = data;
            });
        }
    }
})();

這是我正在使用圖表的html代碼：

 <div class="row">
            <div class="col-md-2">
                <div class="widget wviolet">
                    <div data-cc-widget-header title="People"
                         allow-collapse="true"></div>
                    <div class="widget-content text-center text-info">
                        <canvas id="line" class="chart chart-line" chart-data="data"
                                chart-labels="labels" chart-legend="true" chart-series="series"
                                chart-click="onClick"></canvas> 
                    </div>
                    <div class="widget-foot">
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="widget wgreen">
                    <div data-cc-widget-header title="{{vm.news.title}}"
                         allow-collapse="true"></div>
                    <div class="widget-content text-center text-info">
                        <small>{{vm.news.description}}</small>
                    </div>
                    <div class="widget-foot">
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
 </div>

沒有錯誤消息，但它根本不顯示任何圖表。 實際上，我已經添加了指向chart.js和angular-chart.js的js文件的鏈接。

Answer 1

依賴注入尚未完成您的應用程序。

 angular.module('app', ['chart.js']);

並且在視圖中的app.js文件之后還包含chart.js文件。

還將.controller(controllerId, ['common', 'datacontext', dashboard])更改為.controller(controllerId, ['common', 'datacontext', 'dashboard'])