README

⛔️ 已弃用

此存储库现已弃用。请使用 @icehouse-ventures 进行更新的更新

不再维护。此库基本上是 Chartjs 的桥梁，因此很可能某些问题或问题最好在 Chartjs 存储库本身中解决。

一个简化并自动化在 Laravel 5.x 中使用 Nick Downie 的 Chart.js v2 库创建图表的简单包

设置

composer require fx3costa/laravelchartjs

然后在你的文件 config/app.php 中添加 Service Provider

Fx3costa\LaravelChartJs\Providers\ChartjsServiceProvider::class

最后，目前，你必须安装并将 Chartjs 库添加到你的布局/模板中，该库可以轻松地从以下位置下载：https://chart.js.cn。此设置也将得到改进。

用法

你可以向服务容器请求负责构建图表的服务，并通过流畅的接口传递图表设置。

$service = app()->chartjs
    ->name()
    ->type()
    ->size()
    ->labels()
    ->datasets()
    ->options();

目前，构建器需要图表名称、图表类型（可以是 Chartjs 支持的任何类型）以及其他自定义配置，如标签、数据集、大小和选项。

在数据集接口中，你可以传递任何配置和选项给你的图表。所有在 Chartjs 文档中可用的选项都受支持。只需用 PHP 数组表示法编写配置即可！

高级 Chartjs 选项

由于当前版本允许添加基于简单 JSON 字符串的选项，因此无法生成如下选项：

    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        quarter: 'MMM YYYY'
                    }
                }
            }]
        }
    }

使用 optionsRaw(string) 方法可以以原始格式添加选项

传递字符串格式，类似于 JSON

        $chart->optionsRaw("{
            legend: {
                display:false
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        display:false
                    }  
                }]
            }
        }");

或者，如果你喜欢，你可以传递 PHP 数组格式

$chart->optionsRaw([
    'legend' => [
        'display' => true,
        'labels' => [
            'fontColor' => '#000'
        ]
    ],
    'scales' => [
        'xAxes' => [
            [
                'stacked' => true,
                'gridLines' => [
                    'display' => true
                ]
            ]
        ]
    ]
]);

示例

1 - 线形图 / 雷达图

// ExampleController.php

$chartjs = app()->chartjs
        ->name('lineChartTest')
        ->type('line')
        ->size(['width' => 400, 'height' => 200])
        ->labels(['January', 'February', 'March', 'April', 'May', 'June', 'July'])
        ->datasets([
            [
                "label" => "My First dataset",
                'backgroundColor' => "rgba(38, 185, 154, 0.31)",
                'borderColor' => "rgba(38, 185, 154, 0.7)",
                "pointBorderColor" => "rgba(38, 185, 154, 0.7)",
                "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)",
                "pointHoverBackgroundColor" => "#fff",
                "pointHoverBorderColor" => "rgba(220,220,220,1)",
                'data' => [65, 59, 80, 81, 56, 55, 40],
            ],
            [
                "label" => "My Second dataset",
                'backgroundColor' => "rgba(38, 185, 154, 0.31)",
                'borderColor' => "rgba(38, 185, 154, 0.7)",
                "pointBorderColor" => "rgba(38, 185, 154, 0.7)",
                "pointBackgroundColor" => "rgba(38, 185, 154, 0.7)",
                "pointHoverBackgroundColor" => "#fff",
                "pointHoverBorderColor" => "rgba(220,220,220,1)",
                'data' => [12, 33, 44, 44, 55, 23, 40],
            ]
        ])
        ->options([]);

return view('example', compact('chartjs'));


 // example.blade.php

<div style="width:75%;">
    {!! $chartjs->render() !!}
</div>

2 - 条形图

// ExampleController.php

$chartjs = app()->chartjs
         ->name('barChartTest')
         ->type('bar')
         ->size(['width' => 400, 'height' => 200])
         ->labels(['Label x', 'Label y'])
         ->datasets([
             [
                 "label" => "My First dataset",
                 'backgroundColor' => ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)'],
                 'data' => [69, 59]
             ],
             [
                 "label" => "My First dataset",
                 'backgroundColor' => ['rgba(255, 99, 132, 0.3)', 'rgba(54, 162, 235, 0.3)'],
                 'data' => [65, 12]
             ]
         ])
         ->options([]);

return view('example', compact('chartjs'));


 // example.blade.php

<div style="width:75%;">
    {!! $chartjs->render() !!}
</div>

3 - 饼图 / 环形图

// ExampleController.php

$chartjs = app()->chartjs
        ->name('pieChartTest')
        ->type('pie')
        ->size(['width' => 400, 'height' => 200])
        ->labels(['Label x', 'Label y'])
        ->datasets([
            [
                'backgroundColor' => ['#FF6384', '#36A2EB'],
                'hoverBackgroundColor' => ['#FF6384', '#36A2EB'],
                'data' => [69, 59]
            ]
        ])
        ->options([]);

return view('example', compact('chartjs'));


 // example.blade.php

<div style="width:75%;">
    {!! $chartjs->render() !!}
</div>

注意

此 README，以及该包，正在开发中，但将会不断更新，并将在准备好用于生产时通知您。感谢您的理解。

有任何问题或建议，请最好提出问题！

许可

LaravelChartJs 是开源软件，许可协议为 MIT 许可协议。