3

カスタム棒グラフを ng ディレクティブで使用されるクラスにパックしたいと考えています。ディレクティブを 2 回 (またはそれ以上..) 使用したい

<div ng-app="charts">
    <div ng-controller="mainCtrl">
        <chart-form></chart-form>
        <bar-chart height="options.height" data="data" hovered="hovered(args)"></bar-chart>
        <bar-chart height="options.height" data="data2" hovered="hovered(args)"></bar-chart>
    </div>
</div>

ここでデモを見ることができます: http://jsfiddle.net/uhuRC/2/

フェーダーを使用して高さを変更すると、2 つのチャート データがすばやく切り替わるのがわかります。

よろしくお願いします！

4

1 に答える 1

2

あなたは宣言しています

var chart = new d3.custom.barChart();

ディレクティブのシングルトン インスタンスを作成するために使用される、ディレクティブ ファクトリ クロージャーの内部。その結果、両方のグラフに同じ棒グラフ インスタンスを再利用しています。

その変数を link メソッド (ディレクティブのインスタンスごとに作成されるクロージャー) に移動すると、現在得られているものではなく、2 つの棒グラフが作成されます。これは、壊れた棒グラフの一種にすぎません。変更を加えた jsFiddle を次に示します。

http://jsfiddle.net/reblace/uhuRC/3/

于 2013-09-17T14:21:07.587 に答える