chart.js - 半甜甜圈，带有指向进度 Chart.js 的箭头

Question

我想要一个带有显示当前进度的简单指针的半圆环图。

是否有可能实现以下目标：（忽略糟糕的重叠边界）

我目前有这个：

目前我已经通过 PHP 使用选项数组设置它，因为我正在使用 quickchart.io 在 PDF 中呈现图像。您可以在下面找到我当前使用的配置。

        $options = [
        'type' => 'doughnut',
        'data' => [
            'labels' => ["Red", "Orange", "Green"],
            'datasets' => [
                [
                    'label' => 'Doel',
                    'data' => ['120', '60'],
                    'backgroundColor' => [
                        'rgba(255,99,132,1)',
                        'rgba(0,0,0,0.1)'
                    ],
                    'borderWidth' => 0
                ]]
        ],
        'options' => [
            'rotation' => M_PI,
            'circumference' => M_PI,
            'cutoutPercentage' => 75,
            'legend' => [
                'display' => false
            ],
            'tooltip' => [
                'enabled' => false
            ],
            'plugins' => [
                'datalabels' => ['display' => false],
                'doughnutlabel' => [
                    'labels' => [
                        ['text' => ''],
                        ['text' => ''],
                        ['text' => ''],
                        [
                            'text' => '80%',
                            'color' => '#000',
                            'font' => [
                                'size' => '30'
                            ]
                        ]
                    ]
                ]
            ],
        ]
    ];

标签： chart.js