marineusde / larapex-charts
提供简单API以在Laravel上构建apex图表的包
1.4.2
2024-07-30 09:48 UTC
Requires
- php: ^8.2
- ext-json: *
- illuminate/support: ^10.48|^11.0
Requires (Dev)
- larastan/larastan: ^2.9
- laravel/pint: ^1.15
- nunomaduro/collision: ^7.10
- orchestra/testbench: ^8.10
- phpunit/phpunit: ^10.5
- dev-master
- 1.4.2
- 1.4.1
- 1.4.0
- 1.3.3
- 1.3.2
- 1.3.1
- 1.3
- 1.2.3
- 1.2.2
- 1.2.1
- 1.2
- 1.1
- 1.0
- dev-bugfix-chart-make-with-xaxis
- dev-set-xaxis-with-class
- dev-bugfix-grid-option
- dev-set-grid-with-class
- dev-bugfix-additional-options
- dev-additional-options-with-setter
- dev-code-style-fix
- dev-disable-animations
- dev-fix-charts-without-y-axis
- dev-laravel11
- dev-fixed-make-chart
- dev-provider-name-in-composer-json
- dev-configuration-of-y-axis
- dev-using-static-instead-of-self
- dev-refactoring-code
- dev-renaming-phpunit-configuration
- dev-code-style-and-checks
- dev-ignoring-dev-folders
- dev-composer-updates
- dev-new-repository
- dev-php-update-to-fix-pipeline-problems
- dev-configuration-for-visibility-of-the-legend
- dev-using-code-test-tools-and-refactoring
- dev-ignoring-idea-folder
This package is auto-updated.
Last update: 2024-08-31 06:44:09 UTC
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。