3

我想将我的自定义条形图打包到一个由 ng 指令使用的类中。我想使用该指令两次（或更多..）

<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/

当您使用推子更改高度时，您会看到两个图表数据之间的快速切换

提前谢谢你！

4

1 回答 1

2

你在声明

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

指令工厂闭包内部，用于创建指令的单例实例。因此，您为两个图表重用了相同的条形图实例。

如果您将该变量移动到链接方法（这是为指令的每个实例创建的闭包），它应该创建两个条形图，而不是您现在得到的，这只是一种损坏的条形图。这是一个带有变化的jsFiddle：

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

于 2013-09-17T14:21:07.587 回答