图表
建议编辑图表布局可以使用 orchid:chart Artisan 命令生成。默认情况下，所有新的度量将放置在 app/Orchid/Layouts 目录中：
php artisan orchid:chart ChartsLayout
一旦您的图表类生成完毕，您就可以开始自定义它了。示例：
namespace App\Orchid\Layouts;
use Orchid\Screen\Layouts\Chart;
class ChartsLayout extends Chart
{
/**
* 可用选项：
* 'bar', 'line',
* 'pie', 'percentage'
*
* @var string
*/
protected $type = 'bar';
}
通过创建和设置类的可视化表示，我们可以在未来使用它。但在使用图表之前，我们需要准备我们想要显示的数据。为此，让我们设置屏幕的 query 值：
public function query() : array
{
$dataset = [
[
'labels' => ['12am-3am', '3am-6am', '6am-9am', '9am-12pm', '12pm-3pm', '3pm-6pm', '6pm-9pm'],
'name' => '一些数据',
'values' => [25, 40, 30, 35, 8, 52, 17, -4],
],
[
'labels' => ['12am-3am', '3am-6am', '6am-9am', '9am-12pm', '12pm-3pm', '3pm-6pm', '6pm-9pm'],
'name' => '另一组数据',
'values' => [25, 50, -10, 15, 18, 32, 27, 14],
],
[
'labels' => ['12am-3am', '3am-6am', '6am-9am', '9am-12pm', '12pm-3pm', '3pm-6pm', '6pm-9pm'],
'name' => '再一组数据',
'values' => [15, 20, -3, -15, 58, 12, -17, 37],
],
];
return [
'dataset' => $dataset,
];
}
现在我们可以通过调用静态方法 make 并指定数据的目标键来使用布局类：
use App\Orchid\Layouts\ChartsLayout;
public function layout(): iterable
{
return [
ChartsLayout::make('dataset', '我们数据集的标题'),
];
}
通常数据集需要一些解释，我们可以为此添加描述：
use App\Orchid\Layouts\ChartsLayout;
public function layout(): iterable
{
return [
ChartsLayout::make('dataset', '我们数据集的标题')
->description('图表的描述')
];
}
基本配置
配置用于改变图表的行为。这里有一些属性可以控制样式、高度等。
调整高度
通过指定属性来设置图表的高度（以像素为单位）：
/**
* @var int
*/
protected $height = 250;
自定义颜色
根据图表类型，通过指定属性来设置每个单独单元类型使用的颜色：
/**
* 使用的颜色。
*
* @var array
*/
protected $colors = [
'#2274A5',
'#F75C03',
'#F1C40F',
'#D90368',
'#00CC66',
];
导出图片
图表可以以 SVG 格式导出，这是它们初始显示的格式。为此，指定属性：
/**
* 决定是否显示导出按钮。
*
* @var bool
*/
protected $export = true;
添加标记
有些图表在没有更多信息的情况下很难解读。例如，显示平均值。为此，您可以定义 markers 方法：
/**
* 为了在 Y 轴上突出显示某些值，可以设置标记。
* 它们将在图表上显示为虚线。
*/
protected function markers(): ?array
{
return [
[
'label' => '中等',
'value' => 40,
],
];
}
Eloquent 模型
为了使用模型获取图表数据的方法，您需要添加 Chartable trait：
namespace App;
use Orchid\Metrics\Chartable;
use Orchid\Platform\Models\User as Authenticatable;
class User extends Authenticatable
{
use Chartable;
// ...
}
这将为图表添加几个新方法：
- 分组数据
- 时间段
分组数据
例如，您可能希望构建一个图表来显示启用了双因素认证的用户比例。
namespace App\Orchid\Layouts;
use Orchid\Screen\Layouts\Chart;
class BasicPieChart extends Chart
{
/**
* 可用选项：
* 'bar', 'line',
* 'pie', 'percentage'.
*
* @var string
*/
protected $type = 'pie';
}
然后模型查询将作为数据源 countForGroup()
public function query(): array
{
$userUsageTwoFactorAuth = User::countForGroup('uses_two_factor_auth')->toChart();
return [
'userUsageTwoFactorAuth' => $userUsageTwoFactorAuth,
];
}
public function layout(): array
{
return [
BasicPieChart::make('userUsageTwoFactorAuth', '使用双因素认证'),
];
}
为了更改标题文本，您可以将闭包函数作为第一个参数传递：
User::countForGroup('uses_two_factor_auth')
->toChart(fn(bool $value) => $value ? '已启用' : '未启用'),
使用时间段
接收特定时间段的数据，填充缺失值。
例如，让我们显示新用户和角色的图表：
namespace App\Orchid\Layouts;
use Orchid\Screen\Layouts\Chart;
class BasicLineChart extends Chart
{
/**
* 可用选项：
* 'bar', 'line',
* 'pie', 'percentage'.
*
* @var string
*/
protected $type = 'line';
}
然后数据源将是：
public function query(): array
{
return [
'members' => [
User::countByDays()->toChart('用户'),
Role::countByDays()->toChart('角色'),
]
];
}
public function layout(): array
{
return [
BasicLineChart::make('members', '新成员'),
];
}
默认情况下，数据将被获取一个月；要设置自己的时间段，您需要传递参数：
$start = Carbon::now()->subDay(7);
$end = Carbon::now()->subDay(1);
User::countByDays($start, $end)->toChart('用户')
默认情况下，数据按 created_at 列分组，要更改它：
$start = Carbon::now()->subDay(7);
$end = Carbon::now()->subDay(1);
User::countByDays($start, $end, 'updated_at')->toChart('用户')
值查询类型
值度量不仅仅提供 countByDays 方法。您还可以在构建度量时使用各种其他聚合函数。
average 方法可以用于计算给定列的平均值：
Order::averageByDays('price')->toChart('订单'),
sum 方法可以用于计算给定列的总和：
Order::sumByDays('price')->toChart('订单'),
min 方法可以用于计算给定列的最小值：
Order::minByDays('price')->toChart('订单'),
max 方法可以用于计算给定列的最大值：
Order::maxByDays('price')->toChart('订单'),
