圆形进度条中阈值标记指示器 CSS

Question

我需要在圆形进度条上显示阈值指示器，我能够使用圆形指示器指示该位置。但是我需要显示一个带有阈值的线指示器。

例如，如果阈值是 70%，我必须显示一个显示阈值的线指示器。

关于如何完成的任何建议？也欢迎就可以使用的任何其他外观提出建议。

当前工作版本 - https://stackblitz.com/edit/react-td3nnk

现有外观

期待的样子

Answer 1

我会建议这样的事情。我想 meter/gauge 本身就是简单的部分。这里我有一个 stroke-dasharay 可以设置为 0-100 之间的值。

我添加了更多阈值指示器，以便您可以在圆的左侧和右侧看到它们的外观。基本上它只是一条线和一个旋转的文本。显示左侧文字时需要旋转180度

<svg width="400" viewBox="0 0 100 100" fill="none" stroke-width="5" stroke-linecap="round">
  <circle stroke="silver" cx="50" cy="50" r="40"/>
  <circle transform="rotate(-90 50 50)" stroke="green" cx="50" cy="50" r="40" pathLength="100" stroke-dasharray="65 100"/>
  <g transform="translate(50 50) rotate(-90) rotate(90)">
    <line x1="37.5" y1="0" x2="47.5" y2="0" stroke="black" stroke-width="1"/>
    <text transform="translate(43 -1)" font-size="4" fill="black">25</text>
  </g>
  <g transform="translate(50 50) rotate(-90) rotate(135)">
    <line x1="37.5" y1="0" x2="47.5" y2="0" stroke="black" stroke-width="1"/>
    <text transform="translate(43 -1)" font-size="4" fill="black">38</text>
  </g>
  <g transform="translate(50 50) rotate(-90) rotate(270)">
    <line x1="37.5" y1="0" x2="47.5" y2="0" stroke="black" stroke-width="1"/>
    <text transform="translate(43 -1) rotate(180) translate(-5 -2)" font-size="4" fill="black">75</text>
  </g>
  <g transform="translate(50 50) rotate(-90) rotate(315)">
    <line x1="37.5" y1="0" x2="47.5" y2="0" stroke="black" stroke-width="1"/>
    <text transform="translate(43 -1) rotate(180) translate(-5 -2)" font-size="4" fill="black">88</text>
  </g>
</svg>

互动版

var meter = document.getElementById('meter');
var threshold = document.getElementById('threshold');

document.forms.form01.addEventListener('change', e => {
  let newval = e.target.value;
  switch(e.target.name){
    case 'val':
      meter.setAttribute('stroke-dasharray', `${newval} 100`);
      break;
    case 'tval':
      threshold.setAttribute('transform', `translate(50 50) rotate(-90) rotate(${3.6*newval})`);
      let text = threshold.querySelector('text');
      text.textContent = newval;
      let transformStr = 'translate(43 -1)';
      if(newval > 50) transformStr += ' rotate(180) translate(-5 -2)';
      text.setAttribute('transform', transformStr);
      break;
  }
});

<form name="form01">
<lable>Value: <input name="val" type="range" min="0" max="100" value="25"/></lable>
<lable>Threshold: <input name="tval" type="range" min="0" max="100" value="33"/></lable>
</form>
<svg width="400" viewBox="0 0 100 100" fill="none" stroke-width="5" stroke-linecap="round">
  <circle stroke="silver" cx="50" cy="50" r="40"/>
  <circle id="meter" transform="rotate(-90 50 50)" stroke="green" cx="50" cy="50" r="40" pathLength="100" stroke-dasharray="25 100"/>
  <g id="threshold" transform="translate(50 50) rotate(-90) rotate(120)">
    <line x1="37.5" y1="0" x2="47.5" y2="0" stroke="black" stroke-width="1"/>
    <text transform="translate(43 -1)" font-size="4" fill="black">33</text>
  </g>
</svg>

圆形进度条中阈值标记指示器 CSS

Mark Indicator of a threshold value in circular progress bar CSS

javascript

css

svg

progress-bar

reactjs

互动版