AngularJS가있는 ChartJS - 캔버스에 아무 것도 표시되지 않습니다.

angular-chartjs 라이브러리를 사용하려고하지만 몇 가지 문제가 있습니다. 페이지에 오류가 없습니다. 그러나 캔버스는 비어 있습니다.AngularJS가있는 ChartJS - 캔버스에 아무 것도 표시되지 않습니다.

누구나 아이디어가 있습니까? 스크립트를 몇 차례 재정렬하려고했습니다. 나는 그것을 이해할 수 없다. . :(

여기

는

<html ng-app="profitly"> 
    <head> 
    <script src="js/lib/jquery.min.js"></script> 
    <script src="js/lib/Chart.js"></script> 
    <script src="js/lib/angular.min.js"></script> 
    <script src="js/lib/angular-route.min.js"></script> 
    <script src="js/lib/angular-chartjs.min.js"></script> 
    <script src="js/controller.js"></script> 
    </head> 

    <body ng-controller="MainController" class="container-fluid"> 
    <div class="wrapper" ng-view> 
     <article ng-controller="graph">  
     <cjs-doughnut dataset="someData" options="someOptions" segment-stroke-width="5"></cjs-doughnut>   
     </article> 
    </div> 
    </body> 

<html>

HTML입니다 그리고 여기 응용 프로그램 초기화입니다 :

var app = angular.module('profitly', ['ngRoute', 'chartjs']);

에게 그리고 여기이 부분에 대한 컨트롤러입니다 :

app.controller('graph', function($scope) { 

    $scope.someData = { 
    labels: [ 
     'Supply', 
     'May', 
     'Jun' 
    ], 
    datasets: [ 
     { 
    data: [1, 7, 15, 19, 31, 40] 
     }, 
     { 
    data: [6, 12, 18, 24, 30, 36] 
     } 
    ] 
    }; 

    $scope.someOptions = { 
     segmentStrokeWidth: 20, 
     segmentStrokeColor: '#000' 
    }; 

});

출처

2014-09-14 Imalea

내 해킹 팀의 다른 누군가가 그날 나중에 알아 냈습니다. 가 여기에 HTML입니다 자세한 내용은

<article class="col-xs-6 col-md-offset-3 col-md-6 center"> 
    <canvas id="expenses" width="200" height="100"></canvas> 
     <script> 
        var pieData = [ 
      { 
        value: 20, 
        color:"#878BB6" 
      }, 
      { 
        value : 40, 
        color : "#4ACAB4" 
      }, 
      { 
        value : 10, 
        color : "#FF8153" 
      }, 
      { 
        value : 30, 
        color : "#FFEA88" 
      } 
    ]; 
    var pieOptions = { 
      segmentShowStroke : false, 
      animateScale : true 
    } 
    var expenses = document.getElementById("expenses").getContext("2d"); 
    new Chart(expenses).Pie(pieData, pieOptions); 
    </script> 

</article>

, 우리 github repo (뷰는 "cashflow.html"하나)과 how it rendered를 참조하십시오.

아마도 가장 좋은 방법은 아닙니다.

출처

2015-02-07 19:05:24 Imalea

더 이상 angularJs를 사용하지 않습니다. 이것은 해결책이 아닙니다. –

HTML에 누락 된 ng-app에 어떤 각도 앱을 사용할 것인가가 보입니다.

그래프를 래핑하는 divs 중 하나에 넣을 수 있습니다.

출처

2014-09-14 00:46:15 Koralarts

죄송합니다. 방금 방금 수정했습니다. 뷰와 index.html을 가져 오는 중이므로 스택 오버플로 스 니펫에 추가하는 것을 잊어 버렸습니다. 하지만 거기에 있습니다. 업데이트 된 코드를 참조하십시오. 미안합니다. – Imalea

@Imalea 당신은 이것을 일으키는 원인을 찾았습니까? – ReganPerkins

@ReganPerkins 아니오. 나는 그날 hackathon에 있었고 다른 팀원이 알아 냈습니다. 아래에 답변을 추가하겠습니다. – Imalea

AngularJS가있는 ChartJS - 캔버스에 아무 것도 표시되지 않습니다.

답변

관련 문제