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

问题描述

我想知道你们中是否有人有将图形注入 ui-grid 的经验.我在做什么，是我有一行定义如下:

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

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

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

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

解决方案

首先你使用的是哪种 Angular 模块 for nvd3.js?

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

http://plnkr.co/edit/XESqEPwfXF3ulQkfuBOE

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

<nvd3 options="row.entity.spark.options" data="row.entity.spark.data"></nvd3>

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

解决方案

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

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

http://plnkr.co/edit/XESqEPwfXF3ulQkfuBOE

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>

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