Angular NVD3：如何访问 HTML 中定义的图表对象

Question

我已经使用 <nvd3> 指令定义了一个多条形图，并将 data 和 options 传递给它在我的控制器中定义：

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

范围随后将传递到您在控制器中设置的函数中。另见：https://github.com/krispo/angular-nvd3/issues/445

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

的内容

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

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

Answer 2

可以直接使用angular-NVD3获取图表。如果您使用 api 属性，您可以 'Get access to the internal directive scope. For example, we can get chart object via $scope.api.getScope().chart. [v0.1.0+]'。来自 http://krispo.github.io/angular-nvd3/#/quickstart

换句话说，在使用指令时定义一个 api 属性，例如：

<nvd3 options="ReportCtrl.avgVisitorsTimeSeriesOptions" data="ReportCtrl.avgVisitorsTimeSeriesData" api="ReportCtrl.d3API"></nvd3>

然后在您的控制器中，您可以使用 API 访问指令范围，从中您可以获得 d3 图表对象，例如：

console.log(vm.d3API.getScope().chart); // This gets the actual d3 chart from inside the directive's scope.

希望对您有所帮助。

Angular NVD3：如何访问 HTML 中定义的图表对象

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

javascript

charts

angularjs

angular-nvd3