stroke-dasharray 无法与 angular 6 绑定
stroke-dasharray can't bind with angular 6
我将这张图表与 angular 6 一起使用,我在这张图表上遇到了一些冲突,我尝试绑定数据,但我做不到,它无法正常工作,
这个stroke-dasharray="5, 100"
我换了这个
stroke-dasharray="{{this.master.locationVsStatusMap.size}}, 100"
有人知道如何正确地做到这一点吗?
提前致谢!
.single-chart {
width: 33%;
justify-content: space-around ;
}
.circular-chart {
display: block;
margin: 10px auto;
max-width: 70%;
max-height: 150px;
}
.circle-bg {
fill: none;
stroke: #3c9ee5;
stroke-width: 3.8;
}
.circle {
fill: none;
stroke-width: 3.8;border-right: 1px solid white; border-left: 1px solid white;
stroke-linecap:square;
animation: progress 1s ease-out forwards;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.circular-chart.orange .circle {
stroke: #ff9f00;border-right: 1px solid white; border-left: 1px solid white;
}
.circular-chart.green .circle {
stroke: #4CC790;
}
.circular-chart.blue .circle {
stroke: #3c9ee5;
}
.percentage {
fill: #666;
font-family: sans-serif;
font-size: 0.3em;
text-anchor: middle;
}
.flex-wrapper {
display: flex;
flex-flow: row nowrap;
}
<div class="flex-wrapper">
<div class="single-chart">
<svg viewBox="0 0 36 36" class="circular-chart orange">
<path class="circle-bg"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="circle"
stroke-dasharray="5, 100"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<text x="18" y="20.35" class="percentage">50%</text>
</svg>
</div>
</div>
尝试属性绑定
attr.stroke-dasharray="{{this.master.locationVsStatusMap.size}}, 100"
分叉示例:https://stackblitz.com/edit/angular-wqjlc5
参考:https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html
使用样式绑定-https://coryrylan.com/blog/angular-progress-component-with-svg
style.stroke-dasharray="{{varible}}, 100"
我将这张图表与 angular 6 一起使用,我在这张图表上遇到了一些冲突,我尝试绑定数据,但我做不到,它无法正常工作,
这个stroke-dasharray="5, 100"
我换了这个
stroke-dasharray="{{this.master.locationVsStatusMap.size}}, 100"
有人知道如何正确地做到这一点吗?
提前致谢!
.single-chart {
width: 33%;
justify-content: space-around ;
}
.circular-chart {
display: block;
margin: 10px auto;
max-width: 70%;
max-height: 150px;
}
.circle-bg {
fill: none;
stroke: #3c9ee5;
stroke-width: 3.8;
}
.circle {
fill: none;
stroke-width: 3.8;border-right: 1px solid white; border-left: 1px solid white;
stroke-linecap:square;
animation: progress 1s ease-out forwards;
}
@keyframes progress {
0% {
stroke-dasharray: 0 100;
}
}
.circular-chart.orange .circle {
stroke: #ff9f00;border-right: 1px solid white; border-left: 1px solid white;
}
.circular-chart.green .circle {
stroke: #4CC790;
}
.circular-chart.blue .circle {
stroke: #3c9ee5;
}
.percentage {
fill: #666;
font-family: sans-serif;
font-size: 0.3em;
text-anchor: middle;
}
.flex-wrapper {
display: flex;
flex-flow: row nowrap;
}
<div class="flex-wrapper">
<div class="single-chart">
<svg viewBox="0 0 36 36" class="circular-chart orange">
<path class="circle-bg"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<path class="circle"
stroke-dasharray="5, 100"
d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"
/>
<text x="18" y="20.35" class="percentage">50%</text>
</svg>
</div>
</div>
尝试属性绑定
attr.stroke-dasharray="{{this.master.locationVsStatusMap.size}}, 100"
分叉示例:https://stackblitz.com/edit/angular-wqjlc5
参考:https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html
使用样式绑定-https://coryrylan.com/blog/angular-progress-component-with-svg
style.stroke-dasharray="{{varible}}, 100"