一个进度圈上的两个值答案

【问题标题】：Two values on one progress circle一个进度圈上的两个值
【发布时间】：2022-08-23 15:44:14
【问题描述】：

我正在使用 svg 创建一个圆形进度组件。我怎样才能创造出这样的东西？它们都具有相同的最大值，但例如我想为用户可视化的不同类型

html:

    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"199.738\" height=\"199.739\" viewBox=\"0 0 199.738 199.739\">
        <g id=\"Group_164607\" data-name=\"Group 164607\" transform=\"translate(19155.625 21525.715)\">
            <path id=\"Path_3795\" data-name=\"Path 3795\" class=\"cls-1\"
                  d=\"M63.619,0A63.619,63.619,0,1,1,0,63.619,63.619,63.619,0,0,1,63.619,0Z\"
                  transform=\"translate(-19055.756 -21335.875) rotate(-135)\"/>
            <path #progress id=\"Path_3796\" data-name=\"Path 3796\" class=\"cls-2\"
                  d=\"M63.619,0A63.619,63.619,0,1,1,0,63.619,63.619,63.619,0,0,1,63.619,0Z\"
                  transform=\"translate(-19055.756 -21335.875) rotate(-135)\"/>
        </g>
    </svg>

ts：

@ViewChild(\'progress\') progress: ElementRef;

ngAfterViewInit(): void {
 this.progress.nativeElement.style.strokeDasharray = `300 10000`;
        this.progress.nativeElement.style.strokeDasharray = `${(MyOneValue / 100) * 300} 10000`;
    }

你的问题有点令人困惑。您有 2 个值（均在 0 到 100 范围内）并希望在单个进度小部件中显示这两个值？
是的，这正是我想要的
你知道怎么做这样的东西吗？
这是一个例子：medium.com/@mrovinsky/…
你有一些类似的东西吗？

标签： html angular typescript svg

【解决方案1】：

我找到了这个问题的一个例子： https://www.tutsmake.com/angular-13-doughnut-chart-example-tutorial/

【讨论】：