README

Laravel 的 Apex 图表。

安装

"repositories": [
        {
            "type": "vcs",
            "url": "https://github.com/zaimealabs/charts"
        }
    ]

composer require zaimealabs/charts

php artisan vendor:publish --tag=charts-config

php artisan vendor:publish --tag=charts-apexcharts-script

用法

在控制器中添加

$pie = Charts::pieChart()
    ->setDataset([150, 120])
    ->setTitle('Posts')
    ->setLabels(['Published', 'No Published']);

记得使用以下命令将 Facade 导入到您的控制器中

use ZaimeaLabs\Charts\Facades\Charts;

或者导入 Charts 类

use ZaimeaLabs\Charts\Charts;

在您的布局（Blade 文件）中添加到

    @chartsScripts

然后在您的视图中（Blade 文件）添加：注意：如果希望图表是动态的，请使用 livewire 的语法（例如：livewire:charts-area-chart）。

<div>
    {!! $chart->container() !!}
</div>

或者

<div>
    <livewire:charts-area-chart
        key="{{ $areaChartModel->reactiveKey() }}"
        :area-charts="$areaChartModel"
    />
</div>

您可以使用命令创建图表

php artisan make:charts ChartName

更多示例

$donut = Charts::donutChart()
    ->addData([200, 240, 300])
    ->setTitle('Top 3 active users from group.')
    ->setSubtitle('Season 2024.')
    ->setLabels(['User 3', 'User 10', 'User 91']);

$radial = Charts::radialChart()
    ->addData([4275, 105])
    ->setTitle('Work efficiency.')
    ->setSubtitle('How many working hours and sick leave a user has.')
    ->setLabels(['Worked', 'Sick leave'])
    ->setColors(['#D32F2F', '#03A9F4']);

$line = Charts::lineChart()
    ->addData('Hours worked', [138, 138, 145, 145, 131, 82])
    ->addData('Hours expected', [138, 140, 138, 145, 134, 82])
    ->setTitle('Hours worked during 2024.')
    ->setSubtitle('Hours worked vs Hours expected.')
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June']);

$area = Charts::areaChart()
    ->addData('Hours worked', [138, 138, 145, 145, 131, 82])
    ->addData('Hours expected', [138, 140, 138, 145, 134, 82])
    ->setTitle('Hours worked during 2024.')
    ->setSubtitle('Hours worked vs Hours expected.')
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June']);

$bar = Charts::barChart()
    ->addData('User 3', [6, 9, 3, 4, 10, 8])
    ->addData('User 91', [7, 3, 8, 2, 6, 4])
    ->setTitle('User 3 vs User 91.')
    ->setSubtitle('Working hours during season 2024.')
    ->setXAxis(['January', 'February', 'March', 'April', 'May', 'June']);

自定义图表

动态更改图表颜色

    ->setColors(['#ffc63b', '#ff6384'])

自定义字体

    ->setFontFamily('DM Sans')
    ->setFontColor('#ff6384')

自定义图表网格

    ->setGrid(); // empty adds a default style
    ->setGrid('#3F51B5', 0.1);

自定义图表标记

[#color1, #color2], $width , $hoverSize 

    ->setMarkers(['#FF5722', '#E040FB'], 7, 10);

设置 Sparkline

    ->setSparkline()

设置主题

    ->setTheme('dark')

设置工具栏

    ->setToolbar(bool)

设置工具提示

    ->setTooltip(bool, 'dark/light')

设置动画

    ->setAnimations(bool)