README

这是一个用于在 chart.js 中进行操作的 php 包装器，适用于 Laravel 框架。

此组件提供了一种简单快捷的接口，用于向 lavaravel 应用程序添加图表。

设置

安装

使用命令通过 composer 安装它

composer require vitopedro/laravel-chartjs

配置

1 - 在您的配置文件中将服务提供程序添加到您的应用程序中，该文件通常位于 config/app.php

...
/*
 * Application Service Providers...
 */
...
App\Providers\EventServiceProvider::class,
App\Providers\RouteServiceProvider::class,

vitopedro\chartjs\ChartjsServiceProvider::class,
...

2 - 使用 php artisan serve 测试您的应用程序，如果出现错误，请使用以下命令重置您的 composer qutoload

composer dump-autoload

3 - 使用以下命令发布公共资产

php artisan vendor:publish --tag=public --force

如果一切正常，您将在应用程序的公共文件夹中看到一个名为 vitopedro\chartjs 的文件夹

用法

包含对应于所需图表类型的类，图表正确渲染的最小要求是设置标签和系列。还建议设置标题，但不是必需的。

线/区域/柱状图

这些图表类型相似，可以互换使用以表示相同的数据集。在这些类型中，标签对应于图表的 x 轴的点，是正确渲染数据的必需项。系列对应于数据本身，它是一个数组，每个位置包含一个标签和一个数据位置。标签用于图表的图例和工具提示，数据应是一个包含数字的数组，其长度与标签相同。

示例

线图

use vitopedro\chartjs\LineChart;

$line = new LineChart();
$line->setTitle("this is a title");
$line->setLabels(['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']);
$line->setSeries([
    [
        'label' => 'data 1',
        'data' => [12, 19, 3, 5, 2, 3],
    ],
    [
        'label' => 'data 2',
        'data' => [10, 15, 3, 5, 2, 3],
    ],
]);
echo $line->render();

区域图

use vitopedro\chartjs\AreaChart;

$area = new AreaChart();
$area->setTitle("this is a title");
$area->setLabels(['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']);
$area->setSeries([
    [
        'label' => 'data 1',
        'data' => [12, 19, 3, 5, 2, 3],
    ],
    [
        'label' => 'data 2',
        'data' => [10, 15, 3, 5, 2, 3],
    ],
]);
echo $area->render();

柱状图

use vitopedro\chartjs\ColumnChart;

$column = new ColumnChart();
$column->setTitle("this is a title");
$column->setLabels(['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']);
$column->setSeries([
    [
        'label' => 'data 1',
        'data' => [12, 19, 3, 5, 2, 3],
    ],
    [
        'label' => 'data 2',
        'data' => [10, 15, 3, 5, 2, 3],
    ],
]);
echo $column->render();

饼图

此图表类型与前一个不同，因为它没有 x 轴。在这里，标签对应于每个值的图例或工具提示。为了创建纯饼图，应只使用一个系列，如果传递给 setSeries 函数多个系列，将渲染多个圆圈。在系列中，也必须发送标签以保持一致性，但它不会在任何地方渲染。

示例

use vitopedro\chartjs\PieChart;

$pie = new PieChart();
$pie->setTitle("this is a title");
$pie->setLabels([
    'Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange',
]);
$pie->setSeries([
    [
        'label' => 'data 1',
        'data' => [
            12, 19, 3, 5, 2, 3,
        ],
    ],
]);
return $pie->render();