Question

我正在尝试在我的HotTowel项目中使用折线图sample，但它不会返回任何结果。这是我的仪表板代码：

(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']);

并在chart.js文件中包含app.js文件。

也改变了.controller(controllerId, ['common', 'datacontext', dashboard]) 至 .controller(controllerId, ['common', 'datacontext', 'dashboard'])

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

1 个答案: