Круговая диаграмма с использованием директивы 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>