README

预览

演示

https://github.com/aabosham/livewire-charts-demo

安装

您可以通过composer安装此包

composer require aabosham/livewire-charts

接下来，您必须导出包的公共脚本。为此，请运行php artisan vendor:publish并导出livewire-charts:public。此命令将在您的应用程序的public目录下导出vendor/livewire-charts文件夹。

php artisan vendor:publish --tag=livewire-charts:public

需求

此包需要以下包/库才能正常工作

Laravel Livewire v2 (https://laravel-livewire.com/)
Alpine Js (https://github.com/alpinejs/alpine)
Apex Charts (https://apexcharts.com/)

请按照每个包/库的说明，在您的项目中正确设置它们。

注意：目前，Apex Charts仅支持绘制图表。

用法

Livewire Charts 支持以下类型的图表

线/多线图（《LivewireLineChart》组件）
饼图（《LivewirePieChart》组件）
柱/多线图（《LivewireColumnChart》组件）
面积图（《LivewireAreaChart》组件）

每个组件都附带自己的“模型”类，允许您定义图表的数据和渲染行为。

LivewireLineChart使用LineChartModel设置数据点、标记、事件和其他UI自定义。
LivewirePieChart使用PieChartModel设置数据切片、事件和其他UI自定义。
LivewireColumnChart使用ColumnChartModel设置数据列、事件和其他UI自定义。
LivewireAreaChart使用AreaChartModel设置数据点、事件和其他UI自定义。

例如，要渲染柱状图，我们可以创建一个ColumnChartModel的实例并向其中添加一些数据

$columnChartModel = 
    (new ColumnChartModel())
        ->setTitle('Expenses by Type')
        ->addColumn('Food', 100, '#f6ad55')
        ->addColumn('Shopping', 200, '#fc8181')
        ->addColumn('Travel', 300, '#90cdf4')
    ;

注意：图表模型方法是可链式的 💪

有了$columnChartModel，我们将其传递到我们的Blade模板中的LivewireColumnChart组件中。

<livewire:livewire-column-chart
    :column-chart-model="$columnChartModel"
/>

接下来，在其他应用程序脚本旁边包含@livewireChartsScripts指令

<livewire:scripts />
@livewireChartsScripts

就这样！您在几秒钟内就拥有了一个美丽的渲染图表。👌

注意：您也可以在其他Livewire组件中使用这些图表。只需在Blade模板中渲染它们即可。👍

LivewireCharts门面

您也可以使用LivewireCharts门面创建图表模型。

LivewireCharts::lineChartModel();
LivewireCharts::multiLineChartModel();
LivewireCharts::columnChartModel();
LivewireCharts::multiColumnChartModel();
LivewireCharts::pieChartModel();
LivewireCharts::areaChartModel();

启用交互

要启用点击事件，您必须使用每个模型类中存在的with[XXX]ClickEvent($eventName)方法，并定义一个当点击列/标记/切片时将被触发的自定义$eventName。

$columnChartModel = 
    (new ColumnChartModel())
        ->setTitle('Expenses by Type')
        ->withOnColumnClickEventName('onColumnClick')
    ;

在这里，我们定义了一个当在图表中点击列时将被触发的onColumnClick事件。

我们可以通过在任何其他Livewire组件中注册监听器来监听onClickEvent。

protected $listeners = [
    'onColumnClick' => 'handleOnColumnClick',
];

“响应式”图表

您可以将livewire-charts组件用作Livewire组件的嵌套组件。一旦渲染，图表不会自动响应传递给$model的变化。这正是Livewire的工作方式。

然而，为了在数据传递变化时启用“响应性”，您可以为组件定义一个特殊的$key，以便在图表数据变化时完全重新渲染。

每个模型类都包含一个返回基于其数据的字符串的reactiveKey()方法。如果任何属性发生变化，此键将相应更新并重新渲染图表。

以下示例中，父组件包含柱状图和饼图，并为每个图表定义了一个$model。父组件按以下方式渲染图表：

<livewire:livewire-column-chart
    key="{{ $columnChartModel->reactiveKey() }}"
    :column-chart-model="$columnChartModel"
/>

<livewire:livewire-pie-chart
    key="{{ $pieChartModel->reactiveKey() }}"
    :pie-chart-model="$pieChartModel"
/>

当父组件更改各自的模型时，图表将自动重新渲染自身。

图表API

对于每个图表，都需要使用特定的模型类。在此处详细介绍了每种类型图表可用的API。

所有

LivewireLineChart

LivewireColumnChart

LivewirePieChart

LivewireAreaChart

高级用法 - 集成脚本

指令@livewireChartsScripts添加一个包含public/vendor/livewire-charts/app.js的script标签。如果您想在构建系统中包含此脚本，可以使用php artisan vendor:publish并选择livewire-charts:scripts来导出包脚本。这将导出资源文件夹内的js/vendor/livewire-charts。然后您可以根据项目需要调整导入。

注意：您必须移除@livewireChartsScripts指令，以免与构建系统中的脚本冲突。

故障排除

图表组件必须放置在具有固定高度的容器中。这是因为图表将使用所有给定的垂直空间。需要固定高度才能正确渲染。

<div style="height: 32rem;">
   <livewire:livewire-column-chart .../>
</div>

注意：如果没有提供固定高度，图表将无限垂直增长。这难道是我们想要的吗？

测试

composer test

变更日志

有关最近更改的更多信息，请参阅变更日志。

贡献

有关详细信息，请参阅贡献指南。

安全

如果您发现任何安全问题，请通过电子邮件santibanez.andres@gmail.com联系，而不是使用问题跟踪器。

鸣谢

许可

MIT许可（MIT）。有关更多信息，请参阅许可文件。

aabosham / livewire-charts

维护者

详细信息