javascript - 使用 angular-nvd3 指令的饼图不会填满父 block

Question

我正在尝试在由 angularJS 驱动的网页中构建饼图。我成功地制作了饼图。包含此图表的父 block 是圆形的(通过设置半径完成)。我试图将此图表完全放入 block 中，但饼图并不完全适合它。

以下是 nvd3 元素的代码。

<div class="hollowpie {{ subject.subject_name }}">
          <nvd3-pie-chart
          id="{{ subject.subject_name }}Level"
          data="scores[$index]"
          x="xFunction()"
          y="yFunction()"
          width="100000"
          height="100000"
          color="levelcolorFunction($index)">
            <svg></svg>
          </nvd3-pie-chart>
<div>

以下是这些元素的 CSS。

.hollowpie {
  position: relative;
  display: inline-block;
  width: 170px;
  height: 170px;
  margin-bottom: 22px;
  border-radius: 85px;
}

.hollowpie.Mathematics {
  background-color: rgba(243, 50, 38, 0.4);
}

.hollowpie.Science {
  background-color: rgba(80, 85, 191, 0.4);
}

.hollowpie.English {
  background-color: rgba(126, 211, 33, 0.4);
}

数据加载良好，显示的饼图正是我需要的，除了大小。我试图调整宽度和高度属性，但没有任何区别。我需要添加或更改任何 CSS 吗？

编辑 1:这是我创建的 fiddle 的链接。 http://jsfiddle.net/p6bf773L/ .我对此很陌生，无法为 angular-nvd3 图表指令( https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives )添加外部依赖项。如果可以，请帮忙。

Answer 1

这是一个旧帖子，但这里是 CDN: https://cdnjs.cloudflare.com/ajax/libs/angularjs-nvd3-directives/0.0.8/angularjs-nvd3-directives.min.js

把它放在你的脑海里。例如:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-nvd3-directives/0.0.8/angularjs-nvd3-directives.min.js"></script>