如何用JavaScript更改饼图切片的背景颜色？(How to change the background color of pie slice with JavaScript?)

我正在尝试构建一个饼图，它根据范围输入的值动态变化。

这就是我到目前为止所做的： 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> 
  
 
 
 我的问题是 - 如何为切片设置不同的背景颜色（两条线之间的区域）？ 
 
 例： 
 
  
I'm trying to build a pie chart which dynamically change depending the value of range input.
 
This is what I've done so far: 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> 
  
 
 
My question is - how to set a different background color to the slice (area between two lines)? 
 
Example: 
 

                
最满意答案
                
                    
                        
 尝试使用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> 
  
 
It's better to use svg for this stuff try that
 
 
 
  
  
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>