README

Laravel 对 ApexCharts JavaScript 插件的 Livewire 高级功能包装

安装

composer require larawire-garage/larapex-livewire

发布配置

php artisan vendor:publish --tag=larapex-livewire-configs

发布资产

php artisan vendor:publish --tag=larapex-livewire-assets

添加脚本

在主应用布局文件的 body 标签末尾添加 @larapexScripts blade 指令，并在其他脚本之前

// layouts.app.blade.php
<body>
    <!-- Your Layout HTML content -->

    @larapexScripts

    <script>
        // your scripts
    </script>
</body>

如果您只想在子页面或 Livewire 组件中使用图表，并且需要将脚本推送到特定栈，请将栈名称添加到 larapex-livewire.php 配置文件中的 script_section

// layouts.app.blade.php
<body>
    <!-- Your layout HTML content -->

    @yield('scripts')

    @stack('lw_scripts')
</body>
@larapexScripts

// posts.stats.blade.php [normal or livewire component blade]
<div>
    <!-- Your Sub Page HTML content -->

    @larapexScripts
</div>

'script_section' => 'lw_scripts',

创建图表

php artisan make:larapex YOUR_CHART_CLASS_NAME

并从以下图表类型中选择

区域图表
柱状图
刷子图
饼图
折线图
饼图

然后它会生成一个图表类。

填充数据

图表类是一个普通的 Livewire 类，您可以在类中使用 Livewire 功能。例如，事件监听器，通过 mount() 方法解析值等。

在 getData() 函数中添加数据生成代码，并在 build() 方法中使用它来填充数据。

private function getData(){
    // Data generating logic
}

public function build()
{
    $this->chart = (new WireableAreaChart($this->chart_id))
        ->addArea('sample-1', $this->getData());
}

将图表添加到页面

将图表添加到 blade 文件，就像添加其他 Livewire 组件一样

<div>
    @livewire('chart-class-name-in-slug-format')
</div>

在 @livewire blade 指令中使用图表类的命名空间，并使用点表示法为图表组件名称设置所有斜杠格式。
示例
app/Http/Livewire/TestChart.php 类可以使用 'test-chart'。
app/Http/Livewire/Charts/TestChart.php 类可以使用 'charts.test-chart'。

自定义图表

可以使用除 JavaScript 回调函数之外的所有选项，使用 set 函数作为数组

setChart()
setColors()
setDataLabels()
setFill()
setForecastDataPoints()
setGrid()
setLabels()
setLegend()
setMarkers()
setNoData()
setDataset()
setStates()
setStroke()
setSubtitle()
setTheme()
setTitle()
setTooltip()
setPlotOptions()
setXAxis()
setYAxis()

ApexChart 还有一些辅助函数

sparklineEnable(bool $enable)
colors(array $colors)
randomColors(int $limit)
showDataLabels(bool $show)
dataLabelsTextAnchor(string $anchor)
dataLabelsStyles(array $styles)
fillColors(array $colors)
fillType(string $type)
fillOpacity(float $opacity)
fillSolid(array $colors)
fillGradient(array $fromColors, array $toColors, array $others, string $shade, string $direction, array $colorStops, array $customStops)
showGrid(bool $show)
setGridInfo(array $info)
labels(array $labels)
markers(array $colors,int $width,int $hoverSize, array $others)
noData($text, string $halign, string $valign, array $others)
stroke(int $width, array $colors, string $curve, array $others)
curve(string $curve)
subtitle(string $subtitle, string $position, array $others)
theme(string $mode, array $others)
title(string $title, string $align, array $others)
showTooltip(bool $show)
tooltip(bool $show, string $theme, bool $fillSeriesColor, array $others)
xAxis(array $categories, string $type, string $title, array $others)
xAxisType(string $type)
xAxisTickPlacement(string $placement)
yAxis(bool $show, array $others)
zoom(bool $enable, string $type, array $others)

覆盖配置

background(string $color)
设置前景色(string $color)
设置字体(string $fontFamily)
设置高度(string $height)
设置宽度(string $width)

灵感来源

高度灵感来源于 Larapex Charts 包。

!!! 🎉🎉🎉 欢迎使用 🎉🎉🎉 !!!

larawire-garage / larapex-livewire

维护者

详情

README

填充数据

将图表添加到页面

自定义图表

灵感来源