該
筆畫是完全動態的，因為它們來自 API。我想將筆畫放在接收到的點上（作為百分比值陣列）。不必按順序且2筆畫之間的距離不必相等
我正在嘗試類似下面的內容，但無法提出筆畫放置的邏輯。我試著按照這里的答案：https : //stackoverflow.com/a/66076805/6456247但這里的筆畫之間的距離是相等的。在我的場景中，它們不一致。
小提琴鏈接：https : //jsfiddle.net/puq8v594/2/
let divisionsElement = document.getElementById('divisions');
let length = parseInt(divisionsElement.getAttribute("r")) * Math.PI;
let divisionsArray = [20,30,80,90]; //stroke at 20%, 30%,80%,90% position
let METER_DIVISIONS_GAP = 0.2;
divisionsArray.map(ele => {
setupPath(ele);
})
function setupPath(val) {
divisionsElement.setAttribute("stroke-dasharray", val ' ' METER_DIVISIONS_GAP);
}circle {
fill: none;
}
.circle-back {
stroke: #F8F6F0;
stroke-width:9px;
}
.circle-fill {
stroke: grey;
stroke-width: 10px;
}
.circle-progress {
stroke: blue;
stroke-width:9px;
}<svg viewBox="0 0 126 126" preserveAspectRatio="xMinYMin meet">
<clipPath id="cut-off">
<rect x="0" y="0" width="100%" height="50" />
</clipPath>
<clipPath id="progress-percent">
<path x="0" y="0" width="12%" height="50" />
</clipPath>
<g>
<circle r="35%" cx="40%" cy="40%" class="circle-fill" clip-path="url(#cut-off)" />
<circle id="divisions" r="35%" cx="40%" cy="40%" class="circle-back" clip-path="url(#cut-off)"
stroke-dasharray="20 0.5" stroke-dashoffset="25" />
<circle r="35%" cx="40%" cy="40%" class="circle-progress" clip-path="url(#progress-percent)" />
</g>
</svg>uj5u.com熱心網友回復：
將 pathLength 設定為 100（或接近 100）的圓弧路徑可能更容易做到這一點。
let data =[5 , 10 , 25 ,25 , 6 , 9 , 20];
let i=0;
let drawArray = "";
let arcPath = document.getElementById("meter");
function setupPath() {
for (i=0; i < data.length; i ) {
drawArray = drawArray (data[i] - 0.5) " 0.5 ";
}
arcPath.setAttribute("stroke-dasharray", drawArray);
}; setupPath();<svg width="800px" height="600px" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet">
<path id="meter" fill="none" stroke-dasharray="" stroke-width="20" stroke="blue" pathLength="99.5" d="M30 100 A 40 40 0 0 1 170 100" />
</svg>更新：
我從這個問題中想到，您期望一組百分比值加起來為 100 作為輸入。但是，如果您不知道值的數量或它們的總和，則可以按如下方式對資料進行標準化。此外，您可以使用過濾器添加輪廓 - 這使您不必進行大量數學運算來顯式繪制弧段。
我還意識到您想要部分填充 - 因此您可以通過更改變數 - indexOfFill 來控制儀表的填充位置。
var data = [5, 10 ,25 ,25 ,6 ,9 ,20 ,16 ,33 ,45 ,67];
var dataSum = data.reduce((partial_sum, a) => partial_sum a, 0);
var indexOfFill = 3;
var i=0;
var drawArray = "";
var arcPath = document.getElementById("meter-back");
var filledPath = document.getElementById("meter-fill");
function setupPath() {
// Draw the background
for (i=0; i < data.length; i ) {
drawArray = drawArray (data[i] - (0.5 * (dataSum/100)) " " 0.5*(dataSum/100) " ")};
arcPath.setAttribute("stroke-dasharray", drawArray);
arcPath.setAttribute("pathLength", dataSum - (0.5 * (dataSum/100)));
//Draw the fill
drawArray="";
for (i=0; i < indexOfFill; i ) {
if ( (i 1) === indexOfFill ) {
drawArray = drawArray (data[i] - (0.5 * (dataSum/100)) " " dataSum)
} else {
drawArray = drawArray (data[i] - (0.5 * (dataSum/100)) " " 0.5*(dataSum/100) " ")}};
filledPath.setAttribute("stroke-dasharray", drawArray);
filledPath.setAttribute("pathLength", dataSum - (0.5 * (dataSum/100)));
}; setupPath();<svg width="800px" height="600px" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet">
<defs>
<filter id="outline" y="-50%" height="200%">
<feMorphology operator="erode" radius="0.2"/>
<feComposite operator="out" in="SourceGraphic" result="outline"/>
<feFlood flood-color="black"/>
<feComposite operator="in" in2="outline"/>
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
</defs>
<g filter="url(#outline)">
<path id="meter-back" fill="none" stroke-dasharray="" stroke-width="20" stroke="white" pathLength="99.5" d="M30 100 A 40 40 0 0 1 170 100" />
<path id="meter-fill" fill="none" stroke-dasharray="" stroke-width="20" stroke="rgb(90,90,220)" pathLength="99.5" d="M30 100 A 40 40 0 0 1 170 100" />
</g>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/352533.html
標籤：javascript html css svg 仪表