Ionic mit chart.js zeigt immer weiße Grafik

Ich möchte eine Grafik in einer ionischen Anwendung mithilfe der Diagrammbibliothek anzeigen. Ich folgte den in differents Urls zum Beispiel erläuterten Schritte in:Ionic mit chart.js zeigt immer weiße Grafik

https://www.thepolyglotdeveloper.com/2015/08/using-charts-in-your-ionic-framework-mobile-app/

Dies ist mein Code:

Tabula dash.html

<h1>Simple chart modified</h1> 

<div class="chart-container" ng-show="graph.visible"> 
    <canvas 
    class="chart chart-line" 
    data="graph.data" 
    labels="graph.labels" 
    series="graph.series" 
    options="graph.options" 
    legend="graph.legend" 
    > 
    </canvas> 
</div>

index.html:

<!DOCTYPE html> 

<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
<title></title> 

<link rel="manifest" href="manifest.json"> 

<!-- un-comment this code to enable service worker 
<script> 
    if ('serviceWorker' in navigator) { 
    navigator.serviceWorker.register('service-worker.js') 
     .then(() => console.log('service worker installed')) 
     .catch(err => console.log('Error', err)); 
    } 
</script>--> 

<!-- compiled css output --> 
<link href="css/ionic.app.css" rel="stylesheet"> 

<!-- ionic/angularjs js --> 
<script src="lib/ionic/js/ionic.bundle.js"></script> 

<!-- cordova script (this will be a 404 during development) --> 
<script src="cordova.js"></script> 

<!-- your app's js --> 
<script src="js/Chart.min.js"></script> 
<script src="js/angular-chart.min.js"></script> 
<script src="js/app.js"></script> 
<script src="js/controllers.js"></script> 
<script src="js/services.js"></script> 
</head> 
<body ng-app="starter"> 
<!-- 
    The nav bar that will be updated as we navigate between views. 
--> 
<ion-nav-bar class="bar-positive"> 

    <ion-nav-back-button> 
    </ion-nav-back-button> 
</ion-nav-bar> 

<!-- 
    The views will be rendered in the <ion-nav-view> directive below 
    Templates are in the /templates folder (but you could also 
    have templates inline in this html file if you'd like). 
--> 
<ion-nav-view></ion-nav-view> 
</body> 
</html>

app.js:

Declare chart: 

angular.module('starter', ['ionic','chart.js','starter.controllers','starter.services']) 

... 

.state('tab.dash', { 
    url: '/dash', 
    views: { 
     'tab-dash': { 
     templateUrl: 'templates/tab-dash.html', 
     controller: 'DashCtrl' 
     } 
    } 
    }) 

...

Und in der controllers.js:

.controller('DashCtrl', function($scope) { 

    $scope.graph = {}; 
    $scope.graph.visible = false; 

    $scope.showGraph = function(yesOrNo) { 
    $scope.graph.visible = yesOrNo; 
    } 

    $scope.graph.data = [[1, 2, 3, 4, 5, 6, 7, 8]]; 
    $scope.graph.labels = ['hoi', 'doei', 'hallo', 'hee', 'hoi', 'doei', 'hallo', 'hee']; 
    $scope.graph.options = { 
    animation: false 
    }; 
    $scope.graph.series = ['Series'] 
    $scope.graph.legend = true; 

})

jedoch, wenn ich die Anwendung im Simulator laden und in der Browser, meine Leinwand ist immer weiß und nichts ist sichtbar. In der Konsole wird kein Fehler angezeigt.

Kann mir jemand sagen, was kann falsch sein?

Dank

Quelle

2016-11-04 Ferufab

zeigen Sie Ihren HTML-Teil, der Ihre Grafik zeigt –

Sorry, ich habe den Beitrag bearbeiten für das HTML hinzufügen. Danke – Ferufab

Ändern der chart.js Moduldefinition zu:

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services','chart.js'])

das Markup in der Ansicht Überprüfen Sie nur, wenn Sie die aktuellen Versionen von chart.js verwenden (für 2.x erforderlich):

<canvas 
    class="chart chart-line" 
    chart-data="graph.data" 
    chart-labels="graph.labels" 
    chart-series="graph.series" 
    chart-options="graph.options" 
    chart-legend="graph.legend"> 
    </canvas>

Quelle

2016-12-13 13:50:23 racar

Vielen Dank !! Es ist richtig!! – Ferufab

Ionic mit chart.js zeigt immer weiße Grafik

Antwort

Verwandte Themen