1

我正在尝试在 mdDialog 中使用 chartjs-directive 显示图形。图表的数据必须在控制器中生成。

我下载了指令，其中一份文件说：

“Angular Chart-js 指令 [主页]

用法

  1. 通过 script 标签包含 [chartjs]，可以使用 bower 或下载 min
  2. 包括chartjs-directive.js.
  3. chartjs-directive作为依赖项添加到您的应用程序。
  4. 做<chart>。”

Bower 可通过以下方式安装bower：

bash bower install angular-chartjs-directive

html

<div ng-app="chartjs-directive">
  <chart value="myChart"></chart>
</div>

我在我的 mdDialog 的 html 代码中使用了这段代码：

<div  class="container" style="width: 800px; height: 400px;" >
    <div ng-app="chartjs-directive">
        <chart value="myChart"></chart>
    </div>
</div>

<md-input-container class="md-block" flex-gt-sm>
    <label>{{teste}}</label>
</md-input-container>

（这里，{{teste}} 用于查看控制器是否工作）

在我使用的 index html 顶部：

<script src="resources/js/Chart.js"></script>
<script src="resources/bower_components/angular/angular.min.js"></script>
<script src="resources/bower_components/chartjs/Chart.min.js"></script>
<script src="resources/bower_components/chartjs-directive/chartjs-directive.js"></script>

和控制器：

function GraphController($scope, $mdDialog, $timeout, $http) {
  $scope.hide = function() {
    $mdDialog.hide();
  };
  $scope.cancel = function() {
    $mdDialog.cancel();
  };
  $scope.answer = function(answer) {
    $mdDialog.hide(answer);
  };
  $scope.search = function() {
    var data = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
      {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        data : [65,59,90,81,56,55,40]
      },
      {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,1)",
        pointColor : "rgba(151,187,205,1)",
        pointStrokeColor : "#fff",
        data : [28,48,40,19,96,27,100]
      }
    ]
  };

  $scope.teste = "123456";
  $scope.myChart.data = data;

  };

当用户点击一个按钮时，函数 search() 被调用。

它仅适用于 $scope.teste，我无法显示图表......所以我尝试chartjs-directive在控制器脚本的顶部使用它作为依赖项添加到我的控制器：

我试图将我的功能更改为：

function GraphController($scope, $mdDialog, $timeout, $http,'chartjs-directive')

我的应用程序崩溃了；我还尝试在控制器脚本的顶部添加此代码：

angular.module('appControllers').controller('GraphController', GraphController);
GraphController.$inject = ['$scope', '$mdDialog', '$timeout', '$http','chartjs-directive'];

我的应用程序再次崩溃。

4

0 回答 0