Question

我正在使用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'
            }
          ]
        }
      };
}]);

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

Answer 1

以下工作正常，

<强>样本

＆＃13;

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'
            }
          ]
        }
      };

});

＆＃13;

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

＆＃13;

Answer 2

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

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

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

JSFiddle Demo

Answer 3

更新插件

 <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文件。

角度图表即使在页面中也不可见

3 个答案: