Question

我正在尝试在angularJS驱动的网页中构建饼图。我成功制作了饼图。持有此图表的父块是圆形的（通过设置半径完成）。我试图将这个图表完全放入块中，但是饼图并不完全符合它。

以下是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：这是我创建的小提琴的链接。 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>

使用angular-nvd3指令的饼图不会填充父块

1 个答案: