javascript - Angular NVD3 : How to access the chart object defined in HTML

Question

我已经使用 <nvd3> 定义了一个多条形图指令并传递 data和 options在我的 Controller 中定义它:

<nvd3 options="vm.options" data="vm.data"></nvd3>

现在我想以某种方式访问​​创建的图表对象以进行一些操作，例如，获取 xAxis 缩放函数。

如果图表是在 JavaScript 中定义的，我有那个对象:

var chart = nv.models.multiBarChart()
      .stacked(false)
      .showControls(false);

// and I can get these scaling functions
  var yValueScale = chart.yAxis.scale();
  var xValueScale = chart.xAxis.scale();

如果图表是用 HTML 定义的，是否也可以获取它们？提前致谢。

Answer 1

我不确定您是否还需要这个(已经快一年了)，但我想我可能已经找到了可以作为解决方案的东西？或者，如果这不是您需要的，可以引导您(或其他任何人)找到它？

在弄乱了对象之后，如果你只是在开始时需要它，你可以在 nvd3 标签中使用 'on-ready' 选项。

<nvd3 options="yourOptions" data="yourData" on-ready="callbackFunction">

范围将被传递到您在 Controller 中设置的函数中。另请参阅:https://github.com/krispo/angular-nvd3/issues/445

可以在您的选项中使用回调选项，这样您就可以使用图表变量。所以它应该是

callback: function(chart) {
*use chart here*
}

另请参阅:http://krispo.github.io/angular-nvd3/#/lineChart并查看旁边的回调选项。您也许可以在 html 标记内设置回调，但我还没有尝试过。