README

从 asantibanez/livewire-charts 分支出来，以允许在现有图表上添加更多选项并支持其他类型。

预览

演示

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

安装

您可以通过 composer 安装此软件包

composer require dreamzy/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 而不是使用问题跟踪器。

致谢

• Andrés Santibáñez
• 所有贡献者

许可证

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