CSS样式圆锥渐变和Range Input控制的环形图

2023-11-14 19:18:39

在当今数字时代，数据可视化变得越来越重要。环形图是一种广泛应用于各种领域的常用图表，它们可以直观地表示数据之间的比例关系。使用CSS样式创建环形图不仅可以实现数据可视化，还能为你的项目增添趣味性和交互性。

CSS样式圆锥渐变创建环形图

为了使用CSS样式创建环形图，首先我们需要利用CSS变量定义环形图的样式参数。这些参数包括环形图的半径、线宽和颜色。

:root {
  --radius: 100px;
  --line-width: 10px;
  --color: #00ff00;
}

接着，我们需要使用CSS的conic-gradient()函数来创建圆锥渐变。conic-gradient()函数可以根据指定的角度范围和颜色值创建渐变效果。在我们的例子中，我们将使用conic-gradient()函数来创建环形图的渐变效果。

.ring {
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  border-radius: 50%;
  background: conic-gradient(
    var(--color) calc(var(--progress) * 360deg),
    transparent 0
  );
}

Range Input控制环形图进度

接下来，我们需要使用Range Input来控制环形图的进度。Range Input是一个HTML元素，它允许用户通过拖动滑块来指定一个值。我们将使用Range Input来控制环形图中填充部分的角度，从而实现进度控制。

<input type="range" min="0" max="100" value="0" id="progress-input">

#progress-input {
  width: 200px;
}

最后，我们需要使用JavaScript来将Range Input的值与环形图的进度关联起来。我们可以使用以下代码来实现：

const progressInput = document.getElementById('progress-input');
const ring = document.querySelector('.ring');

progressInput.addEventListener('input', (event) => {
  const progress = event.target.value;
  ring.style.setProperty('--progress', progress / 100);
});