0
我想建立一个饼图,它根据范围输入的值动态改变。如何用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>
我的问题是 - 如何设置不同的背景颜色与切片(两条线之间的区域)?
例子: