Question

制表dashboard.html

<ion-content class="padding" ng-controller="DashboardCtrl">


<div class="card">
    <div class="item item-divider">
        A line chart
    </div>

    <div class="item item-text-wrap">
        <canvas id="line" class="chart chart-line" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>
    </div>   
</div>


<div class="card">
    <div class="item item-divider">
        A bar chart
    </div>
    <div class="item item-text-wrap">
        <canvas id="bar" class="chart chart-bar" data="data" labels="labels" legend="true" series="series" options="{showTooltips: false}"></canvas>
    </div>
</div>


 </ion-content>
 </ion-view>

app.js

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

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

controller.js

  .controller('DashboardCtrl', function($scope){
   $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
   $scope.series = ['Series A', 'Series B'];
   $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
];
})

的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>-->

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<!--CHART CSS-->
<link rel="stylesheet" href="lib/ionic/css/angular-chart.css">
<!--/CHART CSS-->
<link href="css/style.css" rel="stylesheet">

  <!-- IF using Sass (run gulp sass first), then uncomment below and remove  the CSS includes above
<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/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-stable">
  <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).
     -->



 <!--Chart -->

<script src="lib/ionic/js/Chart.min.js"></script>
 <script src="lib/ionic/js/angular-chart.min.js"></script>


<!--barcode-->
<script src="js/ng-cordova.min.js"></script>


<ion-nav-view></ion-nav-view>

我只是粘贴了与此仪表板相关的部分代码。但是，经过调试并意识到代码本身没有错误，我仍然无法显示我的图表。是不是我错过了一些JS文件，或者我错过了几行代码。感谢

Answer 1

在定义图表画布的地方，您需要使用正确的指令，前缀为chart-：

<canvas id="bar" class="chart chart-bar" 
        chart-data="data"
        chart-labels="labels" 
        legend="true" 
        chart-series="series" 
        chart-options="{showTooltips: false}"></canvas>

请参阅the documentation

图表不显示（离子项目）

1 个答案: