README

什么是Chartisan？

Chartisan 是一个用于创建图表的 Laravel 库。这个库通过提供使用 artisan 命令、中间件支持和路由支持来创建图表的功能，试图将其功能做得更类似于 Laravel。这使得处理图表的感觉更接近 Laravel。

Chartisan 使创建图表的 Laravel 体验快速而优雅。

安装

您可以使用 Composer 安装 Chartisan

您可以使用以下 composer 命令将其安装到现有的 Laravel 项目中。

composer require nabcellent/chartisan

Laravel 已经注册了服务提供者到您的应用程序，因为 Chartisan 在 composer.json 架构中使用了额外的 laravel 标签。

发布配置文件

您可以使用以下命令发布配置文件：

php artisan vendor:publish --tag=chartisan

这将创建一个位于 app/config/chartisan.php 下的新文件，您可以根据需要编辑该文件来修改 Chartisan 的选项。

创建图表

您可以使用 Laravel artisan 的典型 make 命令开始创建图表。

遵循其他 make 规范，您可以使用以下命令创建一个新的图表并为其命名。名称将被用作类名和路由名称。您可以在创建的类中进一步修改此名称。

php artisan make:chart SampleChart

这将创建一个位于 App\Charts 命名空间下的 SampleChart 类，其外观如下

<?php

declare(strict_types = 1);

namespace App\Charts;

use Illuminate\Http\Request;
use Nabcellent\Chartisan\BaseChart;
use Nabcellent\Chartisan\Chartisan\Chartisan;

class SampleChart extends BaseChart
{
    /**
     * Handles the HTTP request for the given chart.
     * It must always return an instance of Chartisan
     * and never a string or an array.
     */
    public function handler(Request $request): Chartisan
    {
        return Chartisan::build()
            ->labels(['First', 'Second', 'Third'])
            ->dataset('Sample', [1, 2, 3])
            ->dataset('Sample 2', [3, 2, 1]);
    }
}

创建Chartisan实例

处理方法是在 Chartisan 尝试获取图表数据时将被调用的方法。您将作为参数接收到请求实例，以便在需要时检查查询参数或额外的信息，如头部或表单数据。您可以根据需要修改 Chartisan 实例。

您必须返回一个 Chartisan 实例，永远不要返回一个字符串或对象。

注册图表

您需要手动使用 App\Providers\AppServiceProvider 进行注册

图表有一个已注册的单例，它将被注入到服务提供者的 boot() 方法。

您可以使用以下示例作为注册示例图表的指南。

<?php

namespace App\Providers;

use App\Charts\SampleChart;
use Nabcellent\Chartisan\Registrar as Chartisan;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    // ...

    /**
     * Bootstrap any application services.
     */
    public function boot(Chartisan $charts)
    {
        $charts->register([
            SampleChart::class
        ]);
    }
}

生成的路由

您可以使用 php artisan route:list -c 来查看所有应用程序路由，并检查 Chartisan 创建的图表路由，以防您需要它们。

图表配置

您可以通过简单地应用所需的类属性来自定义 Laravel 侧的某些图表配置。

您可以在图表中修改以下属性

中间件
图表名称（用于生成 URL）
图表路由名称
路由端点前缀

<?php

declare(strict_types = 1);

namespace App\Charts;

use Illuminate\Http\Request;
use Nabcellent\Chartisan\BaseChart;
use Nabcellent\Chartisan\Chartisan\Chartisan;

class SampleChart extends BaseChart
{
    /**
     * Determines the chart name to be used on the
     * route. If null, the name will be a snake_case
     * version of the class name.
     */
    public ?string $name = 'custom_chart_name';

    /**
     * Determines the name suffix of the chart route.
     * This will also be used to get the chart URL
     * from the blade directive. If null, the chart
     * name will be used.
     */
    public ?string $routeName = 'chart_route_name';

    /**
     * Determines the prefix that will be used by the chart
     * endpoint.
     */
    public ?string $prefix = 'some_prefix';

    /**
     * Determines the middlewares that will be applied
     * to the chart endpoint.
     */
    public ?array $middlewares = ['auth'];

    /**
     * Handles the HTTP request for the given chart.
     * It must always return an instance of Chartisan
     * and never a string or an array.
     */
    public function handler(Request $request): Chartisan
    {
        return Chartisan::build()
            ->labels(['First', 'Second', 'Third'])
            ->dataset('Sample', [1, 2, 3])
            ->dataset('Sample 2', [3, 2, 1]);
    }
}

渲染图表

Chartisan 可以在 PHP 侧不进行任何渲染的情况下使用。这意味着它可以作为一个 API 端点使用和服务。无需修改配置文件或图表即可这样做。

然而，如果您不打算开发前端作为 SPA 或在其他应用程序中，并且可以使用 Laravel Blade 语法，那么您可以使用 @chartisan 辅助器来创建图表。

请注意，您仍然需要导入Chartisan，它是您选择的库的前端库。《code>@chartisan blade助手可以接受一个包含图表名称的字符串来获取URL。以下示例可作为指南使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Chartisan example</title>
</head>
<body>
<!-- Chart's container -->
<div id="chart" style="height: 300px;"></div>
<!-- Charting library -->
<script src="https://unpkg.com/echarts/dist/echarts.min.js"></script>
<!-- Chartisan -->
<script src="https://unpkg.com/@chartisan/echarts/dist/chartisan_echarts.js"></script>
<!-- Your application script -->
<script>
	const chart = new Chartisan({
		el: '#chart',
		url: "@chartisan('sample_chart')",
	});
</script>
</body>
</html>

nabcellent / chartisan

维护者

详情