0

我正在尝试在由 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）。如果可以的话请帮忙。

4

1 回答 1

0

这是一篇旧文章，但这里是 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>
于 2016-08-25T19:35:21.017 回答