README

此包允许您直接从 Laravel 生成现代和交互式图表，而不需要与 JavaScript、CSS 等交互。

它涵盖了 ApexCharts 库中所有可用的图表类型和选项。

查看 Akaunting 项目以查看其实时效果。

入门

1. 安装

运行以下命令

composer require akaunting/laravel-apexcharts

2. 发布

发布配置

php artisan vendor:publish --tag=apexcharts

3. 配置

您可以从 config/apexcharts.php 文件更改应用的图表设置

使用方法

Blade

创建一个 Chart 类的实例，并根据您的需求设置数据和选项。

use Akaunting\Apexcharts\Chart;

// ...

$chart = (new Chart)->setType('donut')
    ->setWidth('100%')
    ->setHeight(300)
    ->setLabels(['Sales', 'Deposit'])
    ->setDataset('Income by Category', 'donut', [1907, 1923]);

然后，包含 JavaScript（在每个使用图表的页面上）。

<!-- layout.blade.php -->

<body>
    <!-- ... -->

    @apexchartsScripts
</body>

最后，在您想显示图表的地方调用 container 和 script 方法。

<!-- dashboard.blade.php -->

{!! $chart->container() !!}

{!! $chart->script() !!}

Vue

如果您使用 Vue 和 Inertia，请安装 Apexcharts 及其 Vue 3 适配器

npm install --save apexcharts
npm install --save vue3-apexcharts

// resources/js/app.js

import VueApexCharts from 'vue3-apexcharts';

createInertiaApp({
    // ...
    setup({el, App, props, plugin}) {
        return createApp({ render: () => h(App, props) })
            .use(VueApexCharts)
            .mount(el);
    },
});

然后，创建一个简单的 chart.vue 组件

<!-- components/chart.vue -->

<template>
    <apexchart
        :id="chart.id"
        :key="chart.id"
        :type="chart.type"
        :width="chart.width"
        :height="chart.height"
        :series="chart.series"
        :options="chart.options"
    />
</template>

<script setup>
defineProps({
    chart: Object,
});
</script>

创建一个 Chart 实例，并在将其传递到页面之前调用 toVue()

Route::get('dashboard', function () {
    $chart = (new Chart)->setType('...');

    return inertia('dashboard', [
        'chart' => $chart->toVue(),
    ]);
});

最后，渲染图表

<!-- pages/dashboard.vue -->

<template>
    <Chart :chart="chart" />
</template>

<script setup>
import Chart from './components/chart.vue';

defineProps({
    chart: Object,
});
</script>

测试

composer test

变更日志

请参阅发布了解最近更改的更多信息。

贡献

欢迎拉取请求。您必须遵循 PSR 编码标准。

安全

请审查我们的安全策略了解如何报告安全漏洞。

鸣谢

许可

MIT 许可证 (MIT)。请参阅 LICENSE 了解更多信息。

akaunting / laravel-apexcharts

维护者

详细信息