AngularJS tabset中的Chart.js不会渲染

我正在使用基于Chart.js的AngularJS模块来显示图形。它的功能就像一个魅力，但是当我在AngularJS标签集中显示一个图表时，如果图表不是第一个标签，则该图形不会呈现。AngularJS tabset中的Chart.js不会渲染

<tabset> 
    <tab heading="Tab 1"> 
     <!-- OK --> 
     <canvas class="chart chart-pie" data="[140, 160]" labels="['d1', 'd2']" legend="true"></canvas> 
    </tab> 
    <tab heading="Tab 2"> 
     <!-- Does not render --> 
     <canvas class="chart chart-pie" data="[140, 160]" labels="['d1', 'd2']" legend="true"></canvas> 
    </tab> 
    </tabset>

这是JSFiddle。有没有人设法解决这个问题？

由于

来源

2015-04-01 bviale

没有与chart.js之不表示当创建 https://github.com/jtblin/angular-chart.js/issues/29 – Martin 2015-04-01 16:45:10

作为@马丁指出来，这是不chart.js之显示在一个隐藏的DOM元素initiliazed当图表的问题（其高度和宽度保持在0像素甚至示出隐藏的元素之后）。

此问题已跟踪here。

我与你分享我的家庭解决方案，如果你被隐藏的标签初始化的组件阻止。我创建了一个编译canvas元素的指令。为了能够在需要时刷新元素（例如打开标签页时），我看到一个属性，我将手动更改控制器中的选项卡更改。

这里是我的指令：

app.directive('graphCanvasRefresh', ['$compile', function($compile) { 
function link(scope, elem, attrs) { 

    function refreshDOM() { 
     var markup = '<canvas class="chart chart-pie" id="graph" data="entityGraph.data" labels="entityGraph.labels" legend="true" colours="graphColours" ></canvas>'; 
     var el = angular.element(markup); 
     compiled = $compile(el); 
     elem.html(''); 
     elem.append(el); 
     compiled(scope); 
    }; 

    // Refresh the DOM when the attribute value is changed 
    scope.$watch(attrs.graphCanvasRefresh, function(value) { 
     refreshDOM(); 
    }); 

    // Clean the DOM on destroy 
    scope.$on('$destroy', function() { 
     elem.html(''); 
    }); 
}; 

return { 
    link: link 
}; 
}]);

脏得要命，但是这是你可以使用等待chart.js之更新工作方案。希望它可以帮助某人。

来源

2015-04-02 09:24:59 bviale

不工作的图表时的div最初隐藏的问题我....你可以张贴小提琴吗？ – Phate 2015-06-27 18:24:02

在@bviale答案中增加了一些功能。

app.directive('graphCanvasRefresh', function ($compile, $timeout) { 
    return { 
     scope:{ 
      labels: "=", 
      data: "=", 
      type: "=", 
      refresh: "=" 
     }, 
     link: function (scope, elem, attrs) { 

      function refreshDOM() { 
       var markup = '<canvas class="chart chart-' + scope.type + '" id="' + scope.type + scope.$id + '" chart-labels="' + scope.labels + '" ' + 
               'chart-legend="false" chart-data="' + scope.data +'" ></canvas>'; 
       var newEl = $compile(markup)(scope.$parent.$new()); 
       elem.html(newEl); 
       scope.refresh = false; 
      }; 

      // Refresh the DOM when the attribute value is changed 
      scope.$watch('refresh', function (value) { 
       $timeout(
       refreshDOM(), 100); 
      }); 

      // Clean the DOM on destroy 
      scope.$on('$destroy', function() { 
       elem.html(''); 
      }); 
     } 
    }; 

});

来源

2015-09-16 15:57:55

AngularJS tabset中的Chart.js不会渲染

回答

相关问题