Question

在我的AngularJS App中，我使用了flot chart在饼图中绘制动态值，如下面的链接所示：

http://plnkr.co/edit/WEJMA0f7DnnAh6h8jaMW?p=preview

在flot chart中，我可以在运行时使用标记＆＃39; chartdata＆＃39;传递饼图值。属性和范围变量。

div ng-repeat="user in recordedEvents"  ng-style="{'display': 'inline-block' }">
    {{user.name}}
    <div class="flotcontainer" my-chart chartdata="user.data"></div>
</div>

我试图在D3.JS中同样传递动态数据。这是我尝试的一个例子： http://plnkr.co/edit/iQfkXewUVAylVU4s2913?p=preview

但我不确定如何在D3中传递动态数据。它似乎没有任何类似于标签＆＃39; chartdata＆＃39;的标签。标签。

有人可以帮忙吗？

Answer 1

我所做的是创建可重用的指令，封装我正在尝试使用的D3功能。因此，每当我想使用饼图时，我只需使用我的自定义饼图指令：

<my-pie-chart chart-data="val"></my-pie-chart>

指令代码为我处理所有D3绘图。 Here's别人就我所说的内容的例子。

Answer 2

或者，您可以使用一整套预制指令。

我发现Angular-NVD3非常好，但Angular-NVD3-Directives更受欢迎。 Angular-NVD3在控制器中将其图表属性定义为JavaScript对象：

{
  "chart": {
    "type": "pieChart",
    "height": 500,
    "showLabels": true,
    "transitionDuration": 500,
    "labelThreshold": 0.01,
    "legend": {
      "margin": {
        "top": 5,
        "right": 35,
        "bottom": 5,
        "left": 0
      }
    }
  }
}

Angular-NVD3-Directives在HTML代码中定义其图表属性：

<div ng-controller="ExampleCtrl">
  <nvd3-pie-chart
    data="exampleData"
    id="exampleId"
    width="550"
    height="350"
    x="xFunction()"
    y="yFunction()"
    showLabels="true">
    <svg></svg>
  </nvd3-pie-chart>
</div>

你会在两个页面上找到详细的例子。

d3.js：动态地将数据传递给饼图

2 个答案: