有没有办法制作像ionic 3中图像中那样的圆形进度条？

Question

我正在尝试制作一个圆形进度条，如所附图像中的进度条。 我看过以下内容：

• https://bootsoon.github.io/ng-circle-progress/
• https://ampersandacademy.com/tutorials/ionic-framework-3/how-to-create-a-working-round-progress-bar-in-ionic3
• http://crisbeto.github.io/angular-svg-round-progressbar/

它们提供了半圆，但我看到的不是半圆，而是更多。

我想知道周围是否有我需要的东西，如果没有，我如何修改当前可用的内容以满足我的需求。

Answer 1

像这样吗？

通过更改

dialColours

数组来设置表盘颜色。您还可以设置表盘尺寸 (

dialRadius

) 和厚度 (

dialThickness

)。

通过将百分比传递给

setProgress()

来设置进度。

const dialColours = [
  { colour: 'rebeccapurple', range: 6.5 },  // range is percentage of dial range
  { colour: 'pink',          range: 6 },    // values should add to 100 (%)
  { colour: 'chocolate',     range: 10 },
  { colour: 'dodgerblue',    range: 15 },
  { colour: 'limegreen',     range: 18 },
  { colour: 'gold',          range: 16 },
  { colour: 'tomato',        range: 28.5 }
];

function initialiseDial()
{
  const dialAngleRange = 270;  // deg
  const dialRadius = 60;
  const dialThickness = 20;
  const dial = document.getElementById("dial");

  // Add the colour sections to the dial
  var colourStartAngle = 90 + dialAngleRange / 2;
  const r = dialRadius + dialThickness;
  var start = polar2cartesian(colourStartAngle, r);
  dialColours.forEach(col => {
    // Find third point point of colour sector triangle
    let endAngle = colourStartAngle - (col.range * dialAngleRange / 100);
    let end = polar2cartesian(endAngle, r);
    // Create the sector using an SVG polygon
    const path = document.createElementNS(dial.namespaceURI, "path");
    path.setAttribute("d", ['M', 0, 0,
                            'L', start.x, start.y, 
                            'A', r, r, 0, 1, 1, end.x, end.y,
                            'Z'].join(' '));
    path.setAttribute("fill", col.colour);
    dial.appendChild(path);
    // Step to next colour angle
    colourStartAngle = endAngle;
    start = end;
  });

  // Initialise the progress bar
  const progressBar = document.getElementById("progress-bar");
  start = polar2cartesian(90 + dialAngleRange / 2, dialRadius);
  const end = polar2cartesian(90 - dialAngleRange / 2, dialRadius);
  progressBar.setAttribute("d", ['M', start.x, start.y, 
                                 'A', dialRadius, dialRadius, 0, 1, 1, end.x, end.y].join(' '));
  progressBar.setAttribute("stroke-width", dialThickness);
  
}


function deg2rad(deg) {
  return deg * Math.PI / 180;
}

function polar2cartesian(angle, radius) {
  return {
    x: radius * Math.cos(deg2rad(angle)),
    y: radius * -Math.sin(deg2rad(angle))
  }
}


// Set the profress about
function setProgress(percentage) {
  const progressBar = document.getElementById("progress-bar");
  progressBar.setAttribute("stroke-dasharray", [percentage, 100].join(' '));
}


initialiseDial();

setProgress(100);

svg {
  width: 200px;
}

<svg viewBox="0 0 160 160">
  <defs>
    <mask id="dial-mask">
      <path id="progress-bar" d="" fill="none" stroke="white" pathLength="100"/>
    </mask>
  </defs>
  <!--image href="https://i.stack.imgur.com/9aLrI.png" width="175" height="152"/-->
  <g id="dial" transform="translate(80, 80)" mask="url(#dial-mask)">
  </g>
</svg>

Answer 2

试试我用 Angular 包创建的这个 https://www.npmjs.com/package/angular-circular-progressbar-with-handle

Answer 3

您可以使用这个 Angular 模块，它使用 SVG 创建圆形进度条

http://crisbeto.github.io/angular-svg-round-progressbar/