README

一个用于 laravel Nova Dashboard 的 ChartJs 小部件。

安装

您可以通过 composer 安装此包。

composer require digital-creative/chartjs-widget

基本用法

大部分配置选项可以直接从官方的 Chart.js 文档 中推断出来。

use DigitalCreative\ChartJsWidget\Charts\BarChartWidget;
use DigitalCreative\NovaDashboard\Filters;
use Illuminate\Support\Collection;
use Laravel\Nova\Http\Requests\NovaRequest;

class Example extends BarChartWidget
{
    public function configure(NovaRequest $request): void
    {
        /**
         * These set the title and the button on the top-right if there are multiple "tabs" on this view
         */
        $this->title('Example BarChart');
        $this->buttonTitle('BarChart');
        $this->backgroundColor(dark: '#1e293b', light: '#ffffff');

        $this->padding(top: 30, bottom: 5);

        $this->tooltip([]); // https://chart.js.cn/docs/latest/configuration/tooltip.html#tooltip
        $this->scales([]);  // https://chart.js.cn/docs/latest/axes/#axes
        $this->legend([]);  // https://chart.js.cn/docs/latest/configuration/legend.html#legend
        $this->elements();  // https://chart.js.cn/docs/latest/configuration/elements.html#elements

        /**
         * These will create another tab on the same view, it doesn't necessarily need to be
         * another chart of the same type it can be any other chart.
         */
        $this->addTab(Chart2::class);
        $this->addTab(Chart3::class);
    }

    public function value(Filters $filters): array
    {
        return [
            'labels' => Collection::range(0, 5)->map(fn () => fake()->word()),
            'datasets' => Collection::range(0, 5)->map(fn () => [
                'data' => Collection::range(0, 5)->map(fn () => fake()->numberBetween(0, 100)),
            ]),
        ];
    }
}

所有图表类型都可用

• BarChartWidget
• BubbleChartWidget
• DoughnutChartWidget
• LineChartWidget
• PieChartWidget
• PolarAreaChartWidget
• RadarChartWidget
• ScatterChartWidget

⭐️ 显示您的支持

如果此项目对您有帮助，请给予 ⭐️！

您可能还喜欢的其他包

• Nova Dashboard - 为 Laravel Nova 缺失的控制台！
• Nova Welcome Card - Nova 内置的 帮助卡 的可配置版本。
• Icon Action Toolbar - 用基于图标的操作行替换默认的单调操作菜单。
• Expandable Table Row - 为您的资源表中的每一行提供轻松添加额外数据的方法。
• Collapsible Resource Manager - 为侧边栏中的资源提供轻松排序和分组的方法。
• Resource Navigation Tab - 将您的资源字段组织到选项卡中。
• Resource Navigation Link - 创建指向内部或外部资源的链接。
• Nova Mega Filter - 将所有筛选器显示在卡片中，而不是在小小的下拉菜单中！
• Nova Pill Filter - 一个渲染为可点击药丸的 Laravel Nova 过滤器。
• Nova Slider Filter - 一个 Laravel Nova 过滤器，用于选择最小/最大值之间的范围。
• Nova Range Input Filter - 一个 Laravel Nova 范围输入过滤器。
• Nova FilePond - 一个使用 Filepond 上传文件、图片和视频的 Nova 字段。
• Custom Relationship Field - 在资源之间没有实际关系设置的情况下模拟 HasMany 关系。
• Column Toggler - 一个 Laravel Nova 包，允许您在索引视图中隐藏/显示列。
• Batch Edit Toolbar - 允许您直接从索引页面一次性更新资源的单个列。

许可证

麻省理工学院许可（MIT）。请参阅许可文件获取更多信息。