Angular-Chart.js não exibe o gráfico

Estou tentando usar Angular-chart.js, ele não exibe nada para mim, aqui está minha página javascript e html

(function(){
 angular.module("app", ["chart.js"]).controller("BarCtrl", function ($scope) {
    $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
    $scope.series = ['Series A', 'Series B'];

    $scope.data = [
      [65, 59, 80, 81, 56, 55, 40],
      [28, 48, 40, 19, 86, 27, 90]
    ];
 });
})(); 
    
<!DOCTYPE html>
<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.2/Chart.min.js
    "></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.css
    " />
    <script src="angular-chart.min.js
    "></script>
    <script src="app.js"></script>
</head>

<body ng-app="app">
    <div ng-controller="BarCtrl">
        <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels"></canvas>
    </div>

</body>

</html>

Não entendo onde está o erro. Agradecemos antecipadamente a sua ajuda.

 Syed Ekram Uddin Emon10 de mai de 2016 17:52
Qual navegador você está usando. Você está usando alguma ferramenta de desenvolvimento, alguma coisa no console?
 Belal Mostafa Amin10 de mai de 2016 17:55
Estou usando o google chrome, tentei todas as marcações possíveis, verifiquei meu app.js muitas vezes, nada no console, nenhum aviso, nenhum erro, nada.

questionAnswers(4)

chart-data" seria chart-data = "data"

 Belal Mostafa Amin10 de mai de 2016 18:11
Feito, mas ainda assim nada, de fato, apareceu um erro que é: TypeError: (valor intermediário) [e] não é uma função em d (angular-chart.min.js: 1) em Object.fn (angular-chart. min.js: 1) em r. $ digest (angular.js: 15896) em r. $ apply (angular.js: 16160) em angular.js: 1679 em Object.e [as invoke] (angular.js: 4523 Se a resposta ajudou de alguma forma, por favor, marque como resposta, caso a sua dúvida não tenha sido solucionada, por favor, poste novamente.
 Belal Mostafa Amin10 de mai de 2016 18:15
você pode me dar um exemplo completo, incluindo os scripts necessários na cabeça para experimentá-lo, por algum motivo, acho que há algo errado não com o código, mas com o angular.js incluído e os outros scripts, porque posso encontrei um problema na minha marcação ou no meu aplicativo, js

(intermediate value)[e] is not a function angular chart

Parece que há uma incompatibilidade de versão, tentei o mesmo com o meu próprio projeto, com o mesmo erro. Por favor, tome V1.1.1 deChart.js, como já respondido por @dustin.

Verifique istoviolino.

QuestionSolution

está um trecho que mostra um gráfico de trabalho. Inclui a v1.1.1 do chart.js

angular.module("app", ["chart.js"]).controller("BarCtrl", function($scope) {
  $scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  $scope.series = ['Series A', 'Series B'];

  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
});
<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="1.5.3" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.min.js"></script>
  <script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
  <link rel="stylesheet" href="https://raw.githubusercontent.com/jtblin/angular-chart.js/master/dist/angular-chart.min.css" />
  <script src="app.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="BarCtrl">
    <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
  </div>
</body>

</html>

 Belal Mostafa Amin10 de mai de 2016 18:55
Cara, você é um herói: D FUNCIONOU: D Quero lhe dar 100 partidas, já faz três horas e não entendo o que fazer: D obrigado um milhão de homens, muito obrigado
 Dustin Hodges10 de mai de 2016 19:00
Além disso, se você achar uma resposta útil, vote nela clicando na seta para cima à esquerda da resposta. Para aceitar uma resposta, clique na marca de seleção.
 Belal Mostafa Amin10 de mai de 2016 19:10
diz-me uma vez que eu ganho 15 reputação, só então poderei votar, prometo que vou;), você recomenda o uso de chat.js nativo? Não sei em que bases devo decidir se devo usá-las ou não.
 Dustin Hodges10 de mai de 2016 18:57
Fico feliz em ajudar :) Eu já usei o angular-chart.js antes e gostei muito. Espero que seja atualizado para dar suporte à v2 do chart.js
 Dustin Hodges10 de mai de 2016 19:15
Realmente depende da sua aplicação. Se você estiver usando angular, provavelmente precisará encontrar uma biblioteca que ofereça ligações a uma biblioteca de gráficos js nativa (como angular-chart.js). Se você estiver usando apenas angular para poder usar a biblioteca angular-chart.js, provavelmente seria melhor usar apenas as bibliotecas nativas. Existem várias bibliotecas angulares que permitem interagir com diferentes bibliotecas de gráficos, embora eu tenha usado apenas o angular-chart.js

Sua ligação de dados está incorreta

<canvas id="bar" class="chart chart-bar" data="chart-data" labels="chart-labels" ></canvas>

Você não possui dados de gráficos variáveis nem rótulos de gráficos em seu controlador. Você os nomeou de maneira diferente.

De fato, os atributos estão na ordem inversa. Deveria ser chart-data = "data" chart-labels = "labels"

Exemplo dehttp://jtblin.github.io/angular-chart.js/

<canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>
 Belal Mostafa Amin10 de mai de 2016 18:10
e ainda nada é exibido
 Belal Mostafa Amin10 de mai de 2016 18:08
quando fiz o que você recomendou, encontrei esse erro no console: TypeError: (valor intermediário) [e] não é uma função em d (angular-chart.min.js: 1) em Object.fn (angular-chart. min.js: 1) em r. $ digest (angular.js: 15896) em r. $ apply (angular.js: 16160) em angular.js: 1679 em Object.e [as invoke] (angular.js: 4523 ) em c (angular.js: 1677) em yc (angular.js: 1697) em Zd (angular.js: 1591) em angular.js: 29013 (função anônima) @

yourAnswerToTheQuestion