0
グラフライブラリを使用してイオンアプリケーションでグラフィックを表示します。 https://www.thepolyglotdeveloper.com/2015/08/using-charts-in-your-ionic-framework-mobile-app/Ionic with chart.jsは常に白いグラフィックを表示します
この
が私のコードです：私は、例えば貴様のURLで説明した手順に従っ
タブ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：しかし
.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;
})
、私はシミュレータにし、アプリケーションをロードする：
<!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'
}
}
})
...
そしてcontrollers.jsでブラウザでは、キャンバスは常に白で、何も表示されません。コンソールにエラーは表示されません。
誰かが間違っていることを教えてもらえますか？
おかげ
グラフィックを示すhtml部分を表示 –
申し訳ありませんが、htmlを追加するために投稿を編集しています。おかげで – Ferufab