0
私はあなたがスニペットを実行したときにスライス間のギャップがある見ることができるように、それはそれらを削除することは可能ですか？アンギュラsvgベースのpie charsスライスの間のスペースを削除するにはどうすればよいですか？
angular.module('app', []).controller('main', function() {
// taken from api
var counters = {
"missingAuthorSignature": 60,
"missingWitnessSignature": 70,
"pendingWitnessSignoff": 8,
"entitiesTotalCreated": 83,
"entitiesArchived": 0,
"entitiesCompleted": 12,
"entitiesIncomplete": 71,
"entitiesWitnessed": 38
};
this.activity = {
color: '#1F187A',
data: [{
color: '#3D38A4',
value: counters.entitiesArchived
}, {
color: '#645EDB',
value: counters.entitiesCompleted
}, {
color: '#8781FF',
value: counters.entitiesIncomplete
}, {
color: '#828591',
value: counters.entitiesWitnessed
}]
};
// this part is taken from piechart component
this.parts = this.activity.data.slice();
this.all = {
value: this.parts.reduce((count, part) => {
return count + part.value;
}, 0),
color: this.activity.color
};
this.parts.forEach((part) => {
part.value = part.value * 360/this.all.value;
});
for (var i = 0; i < this.parts.length; ++i) {
this.parts[i].offset = Math.round(this.parts.slice(0, i).reduce((count, part) => {
return count + part.value;
}, 0));
}
});svg {
width: 140px; height: 140px;
transform: rotate(-90deg);
border-radius: 50%;
}
circle {
fill: transparent;
stroke-width: 116;
transform-origin: 50% 50%;
}
#center {
r: 25;
stroke: white;
stroke-width: 5;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="app" ng-controller="main as vm">
<svg viewBox="0 0 116 116">
<circle id="circle-{{$index}}" r="58" cx="58" cy="58" ng-repeat="part in vm.parts"
ng-style="{transform: 'rotate({{part.offset}}deg)'}" stroke="{{part.color}}"
ng-attr-stroke-dasharray="{{part.value}} 360" />
<circle id="center" cx="58" cy="58" ng-style="{fill: vm.all.color}" />
<g transform="translate(58,58) rotate(90) translate(0, -45)">
\t <text y="50" font-family="Arial" fill="white">
<tspan x="0" text-anchor="middle">{{vm.all.value}}</tspan>
\t </text>
</g>
</svg>
</div>を使用してLea Verou svg based pie chartに基づいて、このコードを持っていますか
半円画素又は2でずれているように見えます。または、SVGが正しく作成されていませんか？ – ntgCleaner
これは実際の解決策ではありませんが、問題の内容を伝えることができます。「ストロークダッシュアレイ」は100％正確ではありません。あなたの例で使用されるメソッドは、ストローク内のダッシュ間のギャップ幅を指定するプロパティに依存します。リストを1つのアクティビティーに減らすことによって、なぜこれが問題であるかを知ることができます。 'stroke-dasharray'の値は' 360 360'になります。それは最初のギャップの前に360度のダッシュを与えるはずですが、クロムはその値でうまくいきません。それはまだ "ダッシュ"のためのギャップを追加しようとします。それが問題の根源です。度の値はここでは不正確です。 –