marineusde/larapex-charts

提供简单API以在Laravel上构建apex图表的包


README

apex charts库的Laravel包装器。

为什么我应该使用分支版本?

  • 原始包的维护者不太活跃。很多开发者都在等待新版本。我将努力保持这个包的更新。
  • 使用phpstan和cs-fixer来提高代码质量
  • 我为xaxis、yaxis、网格选项和图表动画添加了更多选项,使用真正的类而不是简单的数组

安装

使用composer。

composer require marineusde/larapex-charts

使用方法

基本示例

在你的控制器中添加

$chart = (new LarapexChart)->setTitle('Posts')
                   ->setDataset([150, 120])
                   ->setLabels(['Published', 'No Published']);

记得使用以下命令将外观导入到你的控制器中

use marineusde\LarapexCharts\Facades\LarapexChart;

或者导入LarapexChart类

use marineusde\LarapexCharts\LarapexChart;

然后在你的视图中(Blade文件)添加

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Chart Sample</title>
 </head>
 <body>
 
     {!! $chart->container() !!}
 
     <script src="{{ $chart->cdn() }}"></script>
 
     {{ $chart->script() }}
 </body>
 </html>

$chart必须是一个LarapexChart对象,而不是创建它的控制器或类。

更复杂的示例

$chart = (new AreaChart)
        ->setTitle('Total Users Monthly')
        ->setSubtitle('From January to March')
        ->setXAxisOptions(new XAxisOption([
            'Jan', 'Feb', 'Mar'
        ]))
        ->setDataset([
            [
                'name'  =>  'Active Users',
                'data'  =>  [250, 700, 1200]
            ]
        ]);

你可以创建各种图表,包括:折线图、面积图、柱状图、水平柱状图、热图、饼图、环形图和径向图。

更好的是使用vite

对于你的项目来说,最好使用vite(或其他类似插件),因为这样你不会遇到apex charts的版本冲突问题

  • 安装npm
  • 使用npm安装vite和vite-plugin-static-copy
  • 将vite.config.js中的代码复制过来
import {defineConfig, normalizePath} from 'vite';
import { viteStaticCopy } from "vite-plugin-static-copy";

export default defineConfig({
    plugins: [
        viteStaticCopy({
            targets: [
                {
                    src: 'node_modules/apexcharts/dist/apexcharts.js',
                    dest: 'js'
                }
            ]
        })
    ]
});

运行:npm run build

现在你可以在Blade文件中使用这些JS文件

<script src="{{ asset('build/js/apexcharts.js') }}"></script>

贡献

作者是Henning Zimmermann。

许可

MIT