连续的角度UI-Grid和D3图 [英] Angular UI-Grid and D3 graph in a row

问题描述

我想知道你们中的任何人是否有将图形注入ui网格的经验.我正在做的是定义一行，如下所示:

I am wondering if any of you had any experience with injecting a graph into a ui-grid. What I am doing, is I have a row defined as follows:

  { name:'Column Name', cellTemplate: '<spark-line-chart values="grid.appScope.valuesStacked"></spark-line-chart>'}

Spark-line-chart指令负责创建D3图表(实际上，确切地说是nvd3).这将创建svg图.

Spark-line-chart directive is responsible for creating a D3 chart (actually, nvd3 to be precise). This creates svg graph.

现在，每次尝试对表格进行排序时，除图形外，表格中的所有值都会进行排序.到目前为止，我正在模拟数据，并对所有图形使用一个值数组.

Now, each time I am trying to sort my table, all of the values within the table get sorted, apart from the graphs. So far, I am mocking up data, and use one array of values for all of the graphs.

有人遇到过类似的问题，知道这个问题的答案吗?

Anyone had similar issues, and knows the answer to this question?

推荐答案

首先使用的是哪种类型的nvd3.js Angular模块?

At first which kind of Angular module for nvd3.js are you using?

如果您使用 angular-nvd3 ，则可以查看以下示例:

If you use angular-nvd3 you can check this example:

http://plnkr.co/edit/XESqEPwfXF3ulQkfuBOE

请注意，在单元格模板中，必须使用.ui-grid-cell-contents CSS类将nvd3图形包装在<DIV>内:

Pay attention that in your cell templates you must wrap the nvd3 graphic inside a <DIV> with .ui-grid-cell-contents CSS class:

<div class="ui-grid-cell-contents">
  <nvd3 options="row.entity.spark.options" data="row.entity.spark.data"></nvd3>
</div>

这篇关于连续的角度UI-Grid和D3图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！