Angular und ChartJS zum Erstellen eines Balkendiagramms

Ich versuche, ein interaktives Diagramm zu schreiben, das Daten aus JSON verwendet und in die Diagrammdaten einfügt. Dazu muss ich chart.js und angular zusammen kombinieren.Angular und ChartJS zum Erstellen eines Balkendiagramms

Als Richtlinie folge ich http://jtblin.github.io/angular-chart.js/, aber das Problem ist, dass es egal ist, was ich tun werde, erscheint das Diagramm nicht.

Ich werde einen Teil des Codes hochladen, der (ich denke) das Problem auftritt.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Graph</title> 
</head> 
<body> 
<script src="../node_modules/angular/angular.min.js"></script> 
<script src="../node_modules/chart.js/Chart.min.js"></script> 
<script src="../node_modules/angular-chart.js/dist/angular-chart.min.js"></script> 

<script> 
    var app = angular.module('app', ['chart.js']); 
    app.controller('BarCtrl', ['$scope', function ($scope) { 
     $scope.options = { legend: { display: true } }; 
     $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] 
     ]; 
    }]); 

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

Nach langer Zeit funktioniert es schließlich:

Lösung:

<script> 
    var app = angular.module('app', ['chart.js']); 
    app.controller('BarCtrl', function ($scope) { 
     $scope.options = { legend: { display: true } }; 
     $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] 
     ]; 
    }); 

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

Quelle

2016-09-23 Maltesse

Es scheint ein Fehler in Ihrem HTML zu sein. Ihre Canvas-Tags werden nicht ordnungsgemäß geschlossen. Ich habe festgestellt, dass dies ein Problem ist, wenn Sie den Code aus dem Beispiel für Winkelgrafiken auf ihrer Site kopieren. Ziemlich nervig. Möglicherweise müssen Sie auch die Höhe und Breite der Zeichenfläche so einstellen, dass sie korrekt angezeigt wird.

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Test</title> 
 

 
    <script> 
 
     var app = angular.module('app', ['chart.js']); 
 

 
     app.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] 
 
      ]; 
 
     }); 
 
    </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" width="400" height="400"> 
 
     </canvas> 
 
    </div> 
 

 

 
<script src="node_modules/angular/angular.min.js"></script> 
 
<script src="node_modules/chart.js/dist/Chart.js"></script> 
 
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script> 
 

 

 
</body> 
 

 
</html>

Quelle

2016-09-23 12:36:57

Das war kein Problem, und ist auch mit chart.js die Größe der Box Einstellung nutzlos, weil Diagramm die Größe überschreiben wird sowieso (Sie haben Optionen zu ändern). Ich habe das Problem gelöst, meinen Beitrag aktualisiert – Maltesse

Angular und ChartJS zum Erstellen eines Balkendiagramms

Antwort

Verwandte Themen