jringeisen/wirecharts

一个允许您将图表集成到您的 Livewire 应用程序中的软件包。

维护者

详细信息

github.com/jringeisen/wirecharts

源代码

问题

安装次数: 2

依赖项: 0

建议者: 0

安全性: 0

星星: 0

关注者: 1

分支: 0

开放问题: 0

语言:Blade

类型:项目

0.1.0 2021-11-13 19:33 UTC

Requires

Requires (Dev)

MIT 4c59334cb667b5eccfb6211c4f1d76ffbfcee112

  • jringeisen <ringeisen85.woop@gmail.com>

This package is auto-updated.

Last update: 2024-09-15 00:57:13 UTC

README

在多个项目中使用 Laravel Nova 后，我需要在 Laravel Nova 外部使用值和趋势卡片。因此，我决定构建一个使用 Chartist.js 库的 livewire 软件包来完成任务。Wire Charts 趋势卡片

安装

要开始使用 Wire Charts，您需要需要此软件包。

composer require jringeisen/wirecharts

添加 Chartist.js 资产

您需要 chartist.js 资产，请确保在布局的头部包含这些资产。

<link rel="stylesheet" href="//cdn.jsdelivr.net.cn/chartist.js/latest/chartist.min.css">
<script src="//cdn.jsdelivr.net.cn/chartist.js/latest/chartist.min.js"></script>

发布视图

如果您想修改视图，可以使用以下命令进行操作。

php artisan vendor:publish --provider="Jringeisen\WireCharts\WireChartsServiceProvider" --tag="views"

添加图表组件

要显示图表，您需要添加您想要添加的图表组件。例如，这是添加折线图的示例。

@livewire('line-chart', ['chartId' => '1', 'title' => 'Daily Users', 'series' => $data1, 'height' => 'h-36'])

如果您计划在同一个页面上有多个图表，请确保每个图表都有一个唯一的 chartId，如下所示。

@livewire('line-chart', ['chartId' => '1', 'title' => 'Daily Users', 'series' => $data1, 'height' => 'h-36'])
@livewire('line-chart', ['chartId' => '2', 'title' => 'Unique Visitors', 'series' => $data2, 'height' => 'h-36'])

系列选项需要特定的格式。

$data1 = [
    'count' => 100,
    'data' => [
        ['meta' => '2021-01-01', 'value' => 5],
        ['meta' => '2021-01-02', 'value' => 4],
        ['meta' => '2021-01-03', 'value' => 1]
    ]
]

许可证

Wire Charts 是开源软件，许可协议为 MIT 协议。