README

此包现在支持 Google 和 ChartJS 图表库，甚至可以在同一页面上同时使用。

实时吗？

实时意味着图表将使用 Livewire wire:poll 属性在指定的轮询间隔自动刷新。

注意，组件只会在第一次绘制，之后每次轮询只会更新数据，因此轮询传输的数据量显著减少，图表只是更新，而不是每次都重新创建。

咖啡？☕

我最喜欢的从编码和商业中摆脱出来的方式是带我的妻子去喝咖啡。
（这在阳光明媚的南非非常便宜）。

如果您使用此包，请考虑您节省了多少时间和精力，并请 为我们买杯咖啡。☕

要求

Laravel 9+
Livewire 3+

安装

composer require mvnrsa/livewire-live-google-charts

配置

如果您发布配置文件，可以设置一些默认值

php artisan vendor:publish --tag=livecharts

配置文件中的值应该是相当直观的。

获取数据

此包使用缓存的查询构建器（或任何外部数据源）来获取数据。实际上，只有查询、绑定和连接被缓存，因为我们无法在请求之间缓存构建器类。

您必须先准备一个构建器，该构建器将在每次需要刷新数据时获取您的数据。

例如这样

$builder = Model::select('column',DB::raw("count(*) as cnt"))
                 ->groupBy('column')
                 ->orderBy('column');

这个构建器会为您提供用于测试的随机数据

$builder = Model::select( 'column',
                            DB::raw('FLOOR(1+rand()*10) AS `cnt 1`'),
                            DB::raw('FLOOR(1+rand()*10) AS `cnt 2`'),
                            // DB::raw('FLOOR(1+rand()*10) AS `cnt 3`'),
                            // etc.
                          )
                    ->groupBy('column')
                    ->orderBy('column');

外部数据源

要使用外部数据源，例如第三方 API，只需扩展图表组件之一，并在组件中添加一个 getExternalData() 方法。

有关更多详细信息，请参阅 EXTERNAL。

配置图表

$chartOptions = [ 'library'=>'chartjs', 'title'=>'Chart Title', 'builder'=>$builder,
                  'poll'=>2, 'width'=>500, height=>250, /* ... */ ];

library 选择要使用的图表库 - google/chartjs
title 应该很明显 - 如果图表内没有标题，请留空
builder 是构建器实例（不带 ->get()！）
poll 是秒数轮询间隔 - 0 表示没有轮询/刷新，它将只绘制图表一次
width 和 height 可以是 HTML 可以理解的内容 - px、%，em 等。
colors 提供一个颜色调色板，作为颜色数组的集合
is3D（true/false）使某些图表变为 3D
pieHole（0.0 到 1.0）控制环形图的饼洞相对大小
jsTypes 是用于混合系列 ChartJS 图表的类型数组

大多数选项都有合理的默认值，来自配置文件，可以省略。

Blade

@livewire('livecharts-pie-chart', $chartOptions)

可用的图表

饼图
环形图
柱状图
条形图
折线图
区域图
多/混合柱状图、折线图、区域图（仅限 ChartJS）
蜡烛图（仅限 Google）

只需将上面的 blade 示例中的 pie 替换为 donut、bar、column 等。

注意，对于蜡烛图，构建器应返回 5 列。

颜色

您可以通过向选项中添加一个 colors 数组来指定图表的颜色调色板。
任何在 HTML 中可以工作的颜色都可以使用，例如

$colors = [ 'red,'#00ff00','#0000ff','pink','cyan' ];
$chartOptions = [ 'title'=>'Chart Title', 'builder'=>$builder, 'poll'=>2, 'colors'=>$colors ];

混合/多图表类型

对于具有混合 bar/line/area 数据系列的 ChartJS 图表，只需添加一个包含类型的 jsTypes 数组。

$chartOptions = [ ... 'jsTypes' => [ 'bar', 'line', 'area' ] ];

其他库选项

可以通过简单地向图表选项中添加一个options数组，将任何其他选项传递给图表库。

$chartOptions = [ .... 'options'=> [ /* other options here */ ] ];

作者

Marnus van Niekerk - mvnrsa - laravel@mjvn.net

感谢Helvetitec

此包最初是Helvetitec/lagoon-charts Google charts包的扩展，由Helvetitec创建。
除了这些是“实时”的:-)

mvnrsa/ livewire-live-google-charts

维护者

详细信息