如何用JavaScript改變餅圖片的背景顏色？

Question

我想建立一個餅圖，它根據範圍輸入的值動態改變。

這是我迄今所做的：https://codepen.io/anon/pen/wqQLPy

const $slider = document.querySelector('input[type=range]'); 
 
const $line2 = document.querySelector('.line2'); 
 

 
$slider.addEventListener('input', handleChange); 
 

 
function handleChange() { 
 
    //$currrentValue.textContent = this.value; 
 
    const degrees = 90 + ((this.value/100) * 360); 
 
    $line2.style.transform = `rotate(${degrees}deg)`; 
 
}

.pie { 
 
    width: 250px; 
 
    height: 250px; 
 
    margin: 0 auto; 
 
    border-radius: 50%; 
 
    border: 3px solid white; 
 
    position: relative; 
 
    background: #ffc600; 
 
    overflow: hidden; 
 
} 
 

 
.line { 
 
    width: 50%; 
 
    height: 2px; 
 
    background: #555; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform-origin: 100%; 
 
    transform: rotate(90deg); 
 
    transition: all .2s linear; 
 
} 
 

 
.line2 { 
 
    transform: rotate(180deg); 
 
    /* When input value is 25 (default) */ 
 
}

<input type="range" min="0" max="100" value="25"> 
 

 
<div class="pie"> 
 
    <div class="line line1"></div> 
 
    <div class="line line2"></div> 
 
</div>

我的問題是 - 如何設置不同的背景顏色與切片（兩條線之間的區域）？

例子：

Answer 1

這是更好地使用SVG這個東西 嘗試

const $slider = document.querySelector('input[type=range]'); 
 
const $currrentValue = document.querySelector('.current-value'); 
 
const $circle = document.querySelector('.circle'); 
 

 
$slider.addEventListener('input', handleChange); 
 

 
function handleChange() { 
 
    
 
    $currrentValue.textContent = this.value; 
 

 
    const degrees = this.value; 
 

 
    $circle.style = 'stroke-dasharray:'+degrees+' 150'; 
 
}

body { 
 
    text-align: center; 
 
    font-size: 2em; 
 
} 
 

 
input { 
 
    width: 300px; 
 
    max-width: 80%; 
 
} 
 

 
input:hover { 
 
    cursor: pointer; 
 
} 
 

 
.current-value { 
 
    position: relative; 
 
    top: -30px; 
 
    left: -7px; 
 
    font-weight: bold; 
 
} 
 

 
.pie{ 
 
    border-radius: 50%; 
 
} 
 

 
.pie circle { 
 
    fill: yellow; 
 
    stroke: red; 
 
    stroke-width: 30; 
 
}

<p>0 <input type="range" min="0" max="100" value="25"> 100</p> 
 
<p class="current-value">25</p> 
 

 
<div style="margin:0 auto ;width:100px; height: 100px;"> 
 
<svg class="pie" viewBox="0 0 30 30"> 
 
<circle r="15" cx="15" cy="15" transform="rotate(45,15,15)" /> 
 
    <circle class="circle" style="stroke-dasharray: 10.5 150;" r="15" cx="15" cy="15" /> 
 

 
</svg> 
 
</div>