HotTowelでchart.jsを使用する、Angular.js

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

あなたのアプリはDependency Injectionを行っていません。

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

も、ビュー内のchart.jsファイルapp.js後のファイルが含まれています。 chart.js HTTP - chart.jsProvider <：// [HTエラー] [$インジェクター：UNPR]不明なプロバイダ

も実際に私がいることを試してみましたが、それはこのエラーを与えた .controller(controllerId, ['common', 'datacontext', 'dashboard'])