Круговая диаграмма с использованием директивы angular-nvd3 не заполняет родительский блок

Я пытаюсь построить круговую диаграмму на веб-странице, управляемой 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). Пожалуйста, помоги, если можешь.

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>
Другие вопросы по тегам