3

Chart.jsに基づくAngularJSモジュールを使用してグラフを表示しています。それは魅力のように機能しますが、AngularJS タブセットにチャートを表示すると、それが最初のタブでない場合、グラフはレンダリングされません。

  <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です。誰かがこれを修正できますか?

ありがとう

4

2 に答える 2

2

@Martin が指摘したように、非表示の DOM 要素で初期化されたときに Chart.js がチャートを表示しない問題です (非表示の要素を表示した後でも高さと幅は 0px のままです)。

この問題はここで追跡されます。

初期化された非表示のタブなどのコンポーネントによってブロックされている場合は、自家製のソリューションを共有します。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-02T09:24:59.413 に答える