角度图不可见，即使它存在于页面中

我正在使用angular-chart.js，它在我的页面中不可见，我已经将图表放在指令中。

我使用的代码：

<div class="row">
    <div class="cold-md-12">
        <canvas class="chart chart-line"
                chart-data="data"
                chart-labels="labels"
                chart-series="series"
                chart-options="options"
                chart-dataset-override="datasetOverride"
                chart-click="onClick"
                style="display:block;width:500px;height:400px;">
        </canvas>
    </div>
</div>

控制器：

app.controller('detailsController',['$scope',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]
      ];
    $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
    $scope.options = {
        scales: {
          yAxes: [
            {
              id: 'y-axis-1',
              type: 'linear',
              display: true,
              position: 'left'
            },
            {
              id: 'y-axis-2',
              type: 'linear',
              display: true,
              position: 'right'
            }
          ]
        }
      };
}]);

控制器放置正确，开发人员工具未显示任何错误，我也得到元素唯一的问题是地图的可见性。

它适用于以下内容，

演示

angular.module("app", ["chart.js"])
.controller("ChartCtrl", function($scope) {
  $scope.moisture = {heading:"Moisture"};
    $scope.ph = {heading:"Ph Level"};
    $scope.tempreture = {heading:"Soil Temp"};
    $scope.water = {heading:"Environment"};
    $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]
      ];
    $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
    $scope.options = {
        scales: {
          yAxes: [
            {
              id: 'y-axis-1',
              type: 'linear',
              display: true,
              position: 'left'
            },
            {
              id: 'y-axis-2',
              type: 'linear',
              display: true,
              position: 'right'
            }
          ]
        }
      };
});

<!DOCTYPE html>
<html>
<head>
  <title>radar Chart</title>
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>   
</head>
<body ng-app="app">
  <div ng-controller="ChartCtrl" style="width:360px">
       <canvas class="chart chart-bar"  chart-click="onClick" chart-data="data" chart-labels="labels" chart-options="options"  ></canvas>
  </div>
 </body>
</html>

代码似乎很好。由于您没有提供带有问题的完整代码，我只能猜测。

您是否在模块依赖项中包含'chart.js' （ angular.module('chartDemo', ['chart.js']) ）。
您是否包括了所需的所有库。

请在下面找到一个JSFiddle。如果问题仍然存在，请告诉我，也请使用提供的 JSFiddle 复制问题并分享回来！

JSFiddle Demo

更新插件

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
 <script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>

http://plnkr.co/edit/d6T8TpXJiKpXplJrsOAS?p=preview

请注意 angular-chart.min.js 文件。

相关内容

最新更新

热门标签：