Question

我想对chartjs使用这个angularJS指令 http://earlonrails.github.io/angular-chartjs-directive/

唯一的问题是它使用HTML5元素图表：

 <chart value="myChart"></chart>

是否可以将其转换为指令并按如下方式使用？因此，我们将其用作div的属性而不是对象。

<div chart-use="myChart" />

更新

我修改了chart-js指令上的代码，如下所示：

angular.module('chartjs-directive', []).
directive('div-chart', function () {
var baseWidth = 600;
var baseHeight = 400;

return {
  restrict: 'A',
  template: '<canvas></canvas>',
  scope: {
    //chartObject: "=value"
  },
 ..............
 ............
    });

和UI这样：

  <!--<chart value="myChart" id="myCoolChart"></chart>-->
  <div id="myColChart" div-chart></div>

但这不起作用。我认为这是因为：

 $scope.myChart.data = data;

但我不确定如何解决它。

Answer 1

为此，您需要更改指令名称及其限制值。

您的图表指令应如下所示：

 app.directive('chartUse', function () {

    return {
       restrict: "A",
       .....
    }
 });

Answer 2

找到了做到这一点的方法。

angular.module('chartjs-directive', []).
 directive('divChart', function () {
var baseWidth = 600;
var baseHeight = 400;

return {
  restrict: 'A',
  template: '<canvas></canvas>',
  scope: {
    divChart:"=",
    chartObject: "=value"
  },
------
------
});

在HTML中：

 <div id="myColChart" div-Chart value="myChart"></div>

我知道这是基本的东西，但这是我第一次使用角色。

Angular chartjs指令

2 个答案: