如何在leandrocfe/filament-apex-charts环形图中设置自定义颜色及显示值与百分比

a) 为任意分类设置自定义颜色 #

在leandrocfe/filament-apex-charts的环形图中，你可以通过配置options里的colors数组指定自定义颜色，数组顺序需与数据分类的顺序一一对应。示例代码如下：

use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class CustomColorRingChart extends ApexChartWidget
{
    protected function getOptions(): array
    {
        return [
            'chart' => [
                'type' => 'donut',
            ],
            'series' => [25, 40, 35],
            'labels' => ['分类A', '分类B', '分类C'],
            // 自定义颜色，顺序匹配labels中的分类
            'colors' => ['#FF6384', '#36A2EB', '#FFCE56'],
        ];
    }
}

如果是动态从数据库获取分类数据，可以先构建对应颜色数组，确保每个分类绑定指定颜色值后，再传入colors配置项。

b) 在数据系列中同时显示数值与百分比 #

要实现环形图的提示框或标签同时展示数值和百分比，可通过配置tooltip或plotOptions的格式化函数实现：

方式1：在提示框（Tooltip）中显示 #

通过tooltip.y.formatter自定义格式化逻辑，同时返回数值和百分比：

use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class ValuePercentTooltipChart extends ApexChartWidget
{
    protected function getOptions(): array
    {
        $series = [25, 40, 35];
        
        return [
            'chart' => [
                'type' => 'donut',
            ],
            'series' => $series,
            'labels' => ['分类A', '分类B', '分类C'],
            'tooltip' => [
                'y' => [
                    'formatter' => function ($value) use ($series) {
                        $total = array_sum($series);
                        $percentage = number_format(($value / $total) * 100, 2);
                        return "{$value} ({$percentage}%)";
                    }
                ]
            ],
        ];
    }
}

方式2：在环形图标签上直接显示 #

如果要在环形图的内外标签直接展示，配置plotOptions.pie.dataLabels.formatter：

use Leandrocfe\FilamentApexCharts\Widgets\ApexChartWidget;

class ValuePercentLabelChart extends ApexChartWidget
{
    protected function getOptions(): array
    {
        $series = [25, 40, 35];
        $total = array_sum($series);
        
        return [
            'chart' => [
                'type' => 'donut',
            ],
            'series' => $series,
            'labels' => ['分类A', '分类B', '分类C'],
            'plotOptions' => [
                'pie' => [
                    'dataLabels' => [
                        'formatter' => function ($val) use ($total) {
                            $percentage = number_format(($val / $total) * 100, 2);
                            return "{$val} ({$percentage}%)";
                        }
                    ]
                ]
            ],
        ];
    }
}

以上配置完全兼容你当前使用的leandrocfe/filament-apex-charts v1.0.2及Filament v2版本。

内容的提问来源于stack exchange，提问作者Petro Gromovo