README

该包用于在Laravel中生成图表，无需在前端实现javascript。它作为chart js的后端服务使用。它将动态渲染HTML和JS配置。

示例

示例1：月度项目、任务和问题完成图表

图表类

namespace App\Charts;

use RadiateCode\DaChartjs\Abstracts\AbstractChart;
use RadiateCode\DaChartjs\Facades\Dataset;
use RadiateCode\DaChartjs\Types\Bar\VerticalBarChart;

class MonthlyChart extends AbstractChart
{
    protected function chartTitle(): string
    {
        return 'Month Chart';
    }

    protected function chartType(): string
    {
        return VerticalBarChart::class;
    }

    protected function labels(): array
    {
        return ['January','February','March'];
    }

    protected function datasets(): array
    {
        return [
            Dataset::general('Project',[20, 30,55])->make(),
            Dataset::general('Task',[50, 80,44])->make(),
            Dataset::general('Task',[70, 75,99])->make()
        ];
    }
}

控制器中

use App\Charts\MonthlyChart;

class ReportController extends Controller 
{  
    public function monthlyChart()
    {
        $monthlyChart = new MonthlyChart();
        
        return view('reports.monthly')->with('monthlyChart',$monthlyChart->template());
    }
}

视图中（blade文件）

<div class="chart">
    <!-- generate chart html canvas -->
    {!! $monthlyChart->chartHtml() !!}
</div>

......
<!-- generate chart js CDN scripts -->
{!! $monthlyChart->chartLibraries() !!}
<!-- generate chart configured scripts -->
{!! $monthlyChart->chartScripts() !!}

示例2：API或AJAX图表

图表显示了根据月份选择的最畅销产品。

图表类

namespace App\Charts;

use RadiateCode\DaChartjs\Abstracts\AbstractChart;
use RadiateCode\DaChartjs\Types\Bar\VerticalBarChart;

class SalesChart extends AbstractChart
{
    protected function chartTitle(): string
    {
        return 'Monthly Sales Chart';
    }

    protected function chartType(): string
    {
        return VerticalBarChart::class;
    }

    protected function labels(): array
    {
        return []; // empty labels, will be loaded by ajax
    }

    protected function datasets(): array
    {
        return []; // empty datasets, will be loaded by ajax
    }
}

控制器中

use App\Charts\SalesChart;

class ReportController extends Controller 
{
    public function salesChart(){
        $monthlySalesChart = new SalesChart();
        
        return view('reports.top_sales')->with('monthlySalesChart',$monthlySalesChart->template());
    }
}

blade文件中

<div class="chart">
    <input type="text" id="month_name" class="form-control month" placeholder="" aria-label="">
    <button class="btn btn-primary" id="search-btn" type="button">
        <i class="fa fa-search-plus"></i>
    </button>
    <!-- generate chart html canvas -->
    {!! $monthlySalesChart->chartHtml() !!}
</div>

......
<!-- generate chart js CDN scripts -->
{!! $monthlySalesChart->chartLibraries() !!}
<!-- generate ajax chart scripts -->
{!! $monthlySalesChart->apiChartScripts(url('fetch/monthly/top/sales/chart'), 'search-btn', ["month_name"]) !!}

当触发"search-btn"时，它将从月份输入元素获取值，将值附加到给定的URL作为查询字符串，并向服务器发送请求以获取数据。

Api路由

Route::get('fetch/monthly/top/sales/chart','ReportController@monthlyTopSales');

Api响应

use RadiateCode\DaChartjs\Facades\Dataset;
use RadiateCode\DaChartjs\Facades\ChartResponse;
use RadiateCode\DaChartjs\Enums\ChartColor;
use App\Models\Order;

class ReportController extends Controller 
{
    public function monthlyTopSales(Request $request)
    {
        $sales = Order::where('month',$request->get('month_name'))
                        ->orderBy('sold_qty','desc')
                        ->groupBy('product_id')
                        ->selectRaw('product_name, SUM(qty) as sold_qty')
                        ->take(4)->get();
                        
         $soldProducts = $sales->pluck('product_name')->toArray();
         $soldQty = $sales->pluck('sold_qty')->toArray();
    
         $datasets = [
            Dataset::label('Top Sales')
                ->data($soldQty)
                ->backgroundColor([
                    ChartColor::LIGHT_SLATE_BLUE,
                    ChartColor::BRIGHT_TURQUOISE,
                    ChartColor::ELECTRIC_PURPLE,
                    ChartColor::EGGPLANT
                ])->make(),
        ];
        
        return ChartResponse::labels($soldProducts)->datasets($datasets)->toJson();
    }
}

要求

安装

您可以通过composer安装此包

composer require radiatecode/dachartjs

注册服务提供者（在Laravel 5.5+上可选）

在您的 config/app.php 文件中注册提供者。

'providers' => [
    ...,
    RadiateCode\DaChartjs\ChartServiceProvider::class,
]

用法

您可以通过两种方式生成图表，例如

通过专用类生成.
或，通过服务生成图表

通过专用类生成图表

运行命令创建图表类

php artisan make:dachartjs MonthlyCompletionChart

这将创建一个位于 App\Charts 命名空间下的专用图表类。

示例代码

namespace App\Charts;

use RadiateCode\DaChartjs\Abstracts\AbstractChart;
use RadiateCode\DaChartjs\Facades\Dataset;
use RadiateCode\DaChartjs\Types\Bar\HorizontalBarChart;

class MonthlyCompletionChart extends AbstractChart
{
	/**
     * Chart title
     *
     * ---------------------------------------------------------------------
     * Note: it can be use as chart id or chart name in js & html
     * ---------------------------------------------------------------------
     * @return string
     */
    protected function chartTitle(): string
    {
        return 'Month Chart';
    }

	/**
     * Chart type
     *
     * ---------------------------------------------------------------------
     * Note: Chart type must be path of a concrete class of TypeInterface
     * [ex: HorizontalBarChart::class]
     * ---------------------------------------------------------------------
     * @return string
     */
    protected function chartType(): string
    {
        return HorizontalBarChart::class;
    }

    /**
     * Chart labels
     *
     * -----------------------------------------------------------------------
     * Note: This labels are used to label the data index (default x axis)
     * -----------------------------------------------------------------------
     * @return array
     */
    protected function labels(): array
    {
        return ['January','February','March'];
    }

     /**
     * Dataset
     *
     * --------------------------------------------------------------
     * Note: datasets can be generate by Dataset Facade 
     * Or, we can pass custom array with dataset properties,
     * --------------------------------------------------------------
     * @return array
     */
    protected function datasets(): array
    {
        return [
            Dataset::general('Project',[20, 30,55])->make(),
            Dataset::general('Task',[50, 80,44])->make(),
            Dataset::general('Task',[70, 75,99])->make()
        ];
    }
}

注意： HorizontalBarChart::class 有一些预定义的默认选项。因此，如果您想更改默认选项，则应重写 changeDefaultOptions()。

class MonthlyCompletionChart extends AbstractChart
{
    /**
    * Change default options when necessary
    *
    * @override method
    * @return array
    */  
    protected function changeDefaultOptions(): array
    {
        return [
             // dot used in key is to indicate nested array level of option properties
            'plugins.title.text' => 'Monthly Completion Chart',
            'plugins.title.color' => 'red',
        ];
    }
}

或者，如果您想提供自定义选项而不是默认选项，则应重写 options()。

class MonthlyCompletionChart extends AbstractChart
{
    /**
    * Use custom options if we don't want to use defaults
    *
    * @override method
    * @return array|string
    */  
    protected function options()
    {
         return [
                'responsive' => true,
                'scales' => [
                    'xAxes' => [
                        'ticks' => [
                            'beginAtZero' => true,
                            'maxRotation' => 90,
                            'minRotation' => 90
                        ]
                    ]
                ],
                'plugins'    => [
                    'title'  => [
                        'text'     => 'My Chart Title',
                        'position' => 'top',
                        'display'  => true,
                        'color'    => 'yellow',
                    ],
                ]
            ];
           
           /** 
           * Json string can be use
           */
           // return "{
           //   responsive : true,
           //   plugins    : {
           //       title  : {
           //           text     : 'My Chart Title',
           //           position : 'top',
           //           display  : true,
           //           color    : 'yellow',
           //       },
           //  },
           // }"
    }
}

注意：如果您想定义图表大小，请重写 chartSize()

 protected function chartSize(): array
   {
       return [
           'height' => 230
           // 'width' => 400 // width is optional for responsive chart
       ];
   }

控制器中

配置完成后，您可以在控制器中使用专用类

use App\Charts\MonthlyCompletionChart;

class ReportController extends Controller
{
    public function monthlyChart(){
        $myChart =  new MonthlyCompletionChart();
        
        return view('reports.monthly')->with('myChart',$myChart->template());
    }
}

专用图表类对象提供两种方法

render(): 渲染方法将返回图表配置数组。稍后可以在javascript中手动使用这些配置

template(): 模板方法返回一个 html构建器实例

视图中（blade文件）

<div class="chart">
    <div class="chart">
        <!-- generate chart html canvas -->
        {!! $myChart->chartHtml() !!}
    </div>
</div>

......

<!-- generate chart.js CDN scripts-->
{!! $myChart->chartLibraries() !!}

<!-- generate configured chart script -->
{!! $myChart->chartScripts() !!}

通过服务生成图表

use RadiateCode\DaChartjs\Chart;
use RadiateCode\DaChartjs\Types\Bar\HorizontalBarChart;
...................

$barChart = (new Chart('Monthly Chart', HorizontalBarChart::class))
        ->labels(['January', 'February','March']) //labeling the data index of the chart
        ->datasets([ // Datasets build by Dataset facade
            Dataset::label('Task')->data([20, 30,55])->backgroundColor('yellow')
            ->borderColor('black')->make(),
            Dataset::label('Project')->data([50, 80,44])->backgroundColor('green')
                ->borderColor('white')->make(),
            Dataset::label('Issue')->data([70, 75,99])->backgroundColor('red')
                ->borderColor('white')->make(),
        ])
        ->template();

图表服务类可用方法

1. build()

以静态方式创建图表服务实例。

// example
Chart::build('title',HorizontalBarChart::class)->labels([])->datasets([])

如果您想避免创建图表实例，例如 new Chart()，这可能很有帮助

2. labels()

对图表数据索引进行标记。可以是x轴或y轴，默认是x轴。

通过 indexAxis 属性更改标签轴，该属性用于 options 配置

3. datasets()

可以通过 Dataset Facades 构建数据集

$barChart->datasets([
    Dataset::label('Task')->data([20, 30,55])->backgroundColor('yellow')
        ->borderColor('black')->make(),
    Dataset::label('Project')->data([50, 80,44])->backgroundColor('green')
        ->borderColor('white')->make(),
    Dataset::label('Issue')->data([70, 75,99])->backgroundColor('red')
        ->borderColor('white')->make(),
]);

或者可以将数据集配置为原始数组

$barChart->datasets(
    [
        [
            "label"           => "Task",
            "backgroundColor" => "yellow",
            "data"            => [20, 30,55],
            "borderColor"     => "yellow",
        ],
        [
            "label"           => "Project",
            "backgroundColor" => "green",
            "data"            => [50, 80,44],
            "borderColor"     => "green",
        ],
        [
            "label"           => "Issue",
            "backgroundColor" => "red",
            "data"            => [70, 75,99],
            "borderColor"     => "red",
        ],
    ]
);

4. changeDefaultOption() [可选]

每种图表类都有一些预定义的默认选项。例如，请参阅 defaultOptions() 方法，例如 HorizontalBarChart 和 MultiAxisLineChart 。

因此，在某些情况下，您可能需要更新默认选项的值。在这种情况下，您可以使用 changeDefaultOption('optionKey','value')。

// example
$barChart->changeDefaultOption('plugins.title.text','Monthly Project, Task And Issue Chart')
        ->changeDefaultOption('plugins.title.color','blue')

注意：键参数中使用的点用于指示选项的嵌套数组级别。此方法仅在选项为PHP数组格式时才有效

5. options() [可选]

如果您不想使用默认选项，请使用您自己的自定义选项

您可以传递 php数组 格式的选项

$barChart->options([
        'responsive' => false,
        'plugins'    => [
            'legend' => [
                'display'  => true,
                'position' => 'top',
            ],
            'title'  => [
                'text'     => 'Custom Title',
                'position' => 'top',
                'display'  => true,
                'color'    => 'black',
            ],
        ],
    ])

或者，您可以传递 json字符串 格式的选项

$barChart->options("{
        responsive : false,
        plugins    : {
            legend : {
                display  : true,
                position : 'top',
            },
            title  : {
                text     : 'Custom Title',
                position : 'top',
                display  : true,
                color    : 'black',
            },
        },
    }")

有关 options 属性的更多信息，请参阅chartjs官方文档。

6. size() [可选]

图表大小

$barChart->size($height,$width = null)

对于响应式图表，宽度是可选的

6. render()

渲染方法将返回图表配置数组。稍后可以在javascript中手动使用这些配置

请在此处查看示例代码这里

7. template()

如果您不想在视图文件中手动设置javascript，请使用 template() 而不是 render()。模板方法返回一个 html构建器 实例

html构建器的各种方法

1. chartHtml() : 生成html canvas标签

2. chartLibraries() : 生成chart js CDN脚本

3. chartScripts() : 生成带有后端配置和数据的图表

请在此处查看示例代码这里

4. apiChartScripts($ajaxOptions, string $clickEventId = null, array $inputElementIds = []) : 生成带有后端配置的图表。它通过ajax加载图表数据与标签。它还允许通过触发点击事件来更新或刷新图表。

对于API响应，您必须使用 ChartResponse Facade

通过ajax加载图表数据：如果您只想通过ajax加载图表数据，则只需传递给apiChartScripts的第一个参数的值

第一个参数接受字符串 (url) 或ajax选项的数组 [url, type, headers]

请在此处查看示例代码这里

通过ajax更新图表数据：如果您要根据某些输入值更新图表，则必须在apiChartScripts的第二个参数中传递一个触发ID，并在第三个参数中传递输入ID。

请在此处查看示例代码这里

图表类型

有各种预定义的图表类型（配置）可供使用，例如

柱状图

折线图

气泡图

饼图

环形图

极坐标图

雷达图

散点图

您可以通过扩展 BaseChartType 来创建自己的自定义类型。命名空间可以是 App\Charts\Types （在app文件夹内创建Charts\Types文件夹）

数据集外观

数据集外观可以帮助生成图表的数据集，每个数据集都有各种属性，例如标签、背景颜色、边框颜色、数据、填充、边框宽度等。上述示例或示例代码显示了如何使用 数据集外观 来生成数据集

方法

请参阅数据集外观的可用方法

专用数据集类（建议）

如果您创建了一个具有多个数据集的图表，这些数据集依赖于多个数据库查询，那么创建一个单独的数据集类将更有利于提高代码的可读性和可维护性

命名空间可以是 App\Charts\Datasets（在应用文件夹内创建 Charts\Datasets 文件夹）

请查看示例代码这里

贡献

请参阅 CONTRIBUTING 获取详细信息。

安全

如果您发现任何与安全相关的问题，请通过电子邮件 radiate126@gmail.com 反馈，而不是使用问题跟踪器。

致谢

许可

MIT 许可证（MIT）。有关更多信息，请参阅许可文件。

radiatecode / dachartjs

维护者

详情

README

示例

示例1：月度项目、任务和问题完成图表

示例2：API或AJAX图表

要求

安装

注册服务提供者（在Laravel 5.5+上可选）

用法

通过专用类生成图表

示例代码

通过服务生成图表

图表服务类可用方法

1. build()

2. labels()

3. datasets()

4. changeDefaultOption() [可选]

5. options() [可选]

6. size() [可选]

6. render()

7. template()

html构建器的各种方法

图表类型

柱状图

折线图

气泡图

饼图

环形图

极坐标图

雷达图

散点图

数据集外观

方法

专用数据集类（建议）

贡献

安全

致谢

许可