如何使用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>