README

预览

演示

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

为何分支

父分支在更新转发给他们的PR方面进度较慢。因此，在你最终合并之前，你应该将其视为一个‘代码避风港’。

这里的新增内容

主题设置
- 暗黑模式 / 亮模式
  - darkMode()
  - lightMode()
  - setThemeMode('dark')
  - setDarkMode(false)
- 主题调色板
  - setThemePalette('palette9')

安装

您可以通过composer安装此包

composer require asantibanez/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

变更日志

请参阅 CHANGELOG 了解最近更改的更多信息。

贡献

请参阅 CONTRIBUTING 了解详细信息。

安全

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

鸣谢

许可证

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

acelords / livewire-charts

维护者

详细信息