maartenpaauw/laravel-charts-css

该包已被废弃且不再维护。未建议替代包。

Laravel 组件，用于创建美观的 Charts.css 图表。

维护者

详情

github.com/maartenpaauw/laravel-charts-css

主页

源代码

问题

安装: 54

依赖者: 0

建议者: 0

安全: 0

星标: 102

关注者: 4

分支: 9

开放问题: 10

v2.0.0 2022-04-05 13:41 UTC

Requires

Requires (Dev)

MIT 5cfed448f5560e9a4ba2c88b5c2b6a1bce55bebf

  • Maarten Paauw <maartenpaauw.woop@gmail.com>

laravelmaartenpaauwlaravel-charts-css

This package is auto-updated.

Last update: 2024-02-28 13:38:42 UTC

README

Banner

Laravel 组件，用于创建漂亮的 Charts.css 图表。

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

此包将帮助您根据 Charts.css 库生成仅 CSS 的图表。

安装

您可以通过 composer 安装此包

composer require maartenpaauw/laravel-charts-css

使用

以下是创建图表的示例

php artisan make:chart MedalsChart

这将在 View/Components 命名空间内生成图表组件。

<?php

namespace App\View\Components;

use Maartenpaauw\Chartscss\Chart;
use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;

class MedalsChart extends Chart
{
    protected function id(): string
    {
        return 'medals-chart';
    }

    protected function heading(): string
    {
        return __('Medals Chart');
    }

    protected function datasets(): DatasetsContract
    {
        return new Datasets(
            new Axes('Country', ['Gold', 'Silver', 'Bronze']),
            new Dataset([
                new Entry(new Value(46)),
                new Entry(new Value(37)),
                new Entry(new Value(38)),
            ], new Label('USA')),
            new Dataset([
                new Entry(new Value(27)),
                new Entry(new Value(23)),
                new Entry(new Value(17)),
            ], new Label('GBR')),
            new Dataset([
                new Entry(new Value(26)),
                new Entry(new Value(18)),
                new Entry(new Value(26)),
            ], new Label('CHN')),
        );
    }
}

要显示图表，只需添加以下 blade 组件即可

<x-medals-chart/>

请确保也导入 CSS 库。为此提供了一个辅助组件！

<x-charts-css-stylesheet cdn="unpkg" />

高级

在 src/Examples 目录中查看所有 Charts.css 文档示例，或阅读以下所有高级文档，以了解更多信息。

工具提示

您可以像这样为每个条目配置工具提示

use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Tooltip\Tooltip;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;

// ...

protected function datasets(): DatasetsContract
{
    return new Datasets(
        new Axes('Type', 'Amount'),
        new Dataset([
            new Entry(
                new Value(46),
                new Label('Gold'),
                new Tooltip('46 gold medals!'), // <--
            ),
            new Entry(
                new Value(37),
                new Label('Silver'),
                new Tooltip('37 silver medals!'), // <--
            ),
            new Entry(
                new Value(38),
                new Label('Bronze'),
                new Tooltip('38 bronze medals!'), // <--
            ),
        ]),
    );
}

单个数据集

默认生成的图表组件显示了如何提供多个数据集。如果您只想显示单个数据集，您仍然需要在数据集实例中包装它。这是因为必须提供坐标轴。唯一的区别是您需要通过条目提供数据坐标轴，并通过坐标轴提供全局描述。

use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;

// ...

protected function datasets(): DatasetsContract
{
    return new Datasets(
        new Axes('Type', 'Amount'),
        new Dataset([
            new Entry(new Value(46), new Label('Gold')),
            new Entry(new Value(37), new Label('Silver')),
            new Entry(new Value(38), new Label('Bronze')),
        ]),
    );
}

隐藏特定标签

use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;

// ...

protected function datasets(): DatasetsContract
{
    return new Datasets(
        new Axes('Type', 'Amount'),
        new Dataset([
            (new Entry(new Value(46), new Label('Gold')))
                ->hideLabel(), // <--
            new Entry(new Value(37), new Label('Silver')),
            new Entry(new Value(38), new Label('Bronze')),
        ]),
    );
}

您可以通过在数据集上调用 hideLabel() 方法来隐藏条目的标签。

特定标签的对齐方式

use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;

// ...

protected function datasets(): DatasetsContract
{
    return new Datasets(
        new Axes('Type', 'Amount'),
        new Dataset([
            (new Entry(new Value(46), new Label('Gold')))
                ->alignLabel('end'), // <--
            new Entry(new Value(37), new Label('Silver')),
            new Entry(new Value(38), new Label('Bronze')),
        ]),
    );
}

您可以通过在数据集上调用 alignLabel() 方法并使用 start、center 或 end 作为参数来对齐条目的标签。

多个数据集

隐藏特定标签

use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;

// ...

protected function datasets(): DatasetsContract
{
    return new Datasets(
        new Axes('Country', ['Gold', 'Silver', 'Bronze']),
        (new Dataset([
            new Entry(new Value(46)),
            new Entry(new Value(37)),
            new Entry(new Value(38)),
        ], new Label('USA')))
            ->hideLabel(), // <--
        new Dataset([
            new Entry(new Value(27)),
            new Entry(new Value(23)),
            new Entry(new Value(17)),
        ], new Label('GBR')),
    );
}

您可以通过在数据集上调用 hideLabel() 方法来隐藏数据集的标签。

隐藏特定标签

use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;

// ...

protected function datasets(): DatasetsContract
{
    return new Datasets(
        new Axes('Country', ['Gold', 'Silver', 'Bronze']),
        (new Dataset([
            new Entry(new Value(46)),
            new Entry(new Value(37)),
            new Entry(new Value(38)),
        ], new Label('USA')))
            ->alignLabel('end'), // <--
        new Dataset([
            new Entry(new Value(27)),
            new Entry(new Value(23)),
            new Entry(new Value(17)),
        ], new Label('GBR')),
    );
}

您可以通过在数据集上调用 alignLabel() 方法并使用 start、center 或 end 作为参数来对齐数据集的标签。

堆叠数据集

use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Datasets\PercentageStackedDatasets;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;

// ...

protected function datasets(): DatasetsContract
{
    return new PercentageStackedDatasets(
        new Datasets(
            new Axes('Country', ['Gold', 'Silver', 'Bronze']),
            new Dataset([
                new Entry(new Value(46)),
                new Entry(new Value(37)),
                new Entry(new Value(38)),
            ], new Label('USA')),
            new Dataset([
                new Entry(new Value(27)),
                new Entry(new Value(23)),
                new Entry(new Value(17)),
            ], new Label('GBR')),
        ),
    );
}

如果您想使图表数据堆叠，可以将数据集实例包装在 SimpleStackedDatasets 或 PercentageStackedDatasets 装饰器中。智能配置将自动添加 Stacked 修改。

样式表

警告！ 确保您将此组件插入到您的基模板中，其中图表没有被直接使用。否则，自定义颜色方案不会被推送到 CSS 栈。

<x-charts-css-stylesheet cdn="unpkg" />

Charts.css 在两个不同的 CDN 上托管生产 CSS 文件：jsdelivr 和 unpkg。您可以通过在 blade 文件的 head 中添加以下组件来导入样式表。

如果您使用其他方式添加 CSS，例如包管理器，则可以省略 cdn 属性。然后此组件仅用于渲染颜色方案定义。

类型

use Maartenpaauw\Chartscss\AreaChart;

class MyChart extends AreaChart
{
    // ...
}

目前支持 4 种图表类型

  • 面积图
  • 柱状图
  • 条形图
  • 折线图

默认情况下，每个生成的图表都是 Column 图表。如果您想更改图表类型，可以覆盖 type 方法，或者您可以选择继承 AreaChart、BarChart 或 LineChart 类而不是 Chart 类。

在使用区域图或折线图时，您必须通过在第一个条目上调用 start 方法来确定图表的开始

use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;

// ...

protected function datasets(): DatasetsContract
{
    return new Datasets(
        new Axes('Type', 'Amount'),
        new Dataset([
            (new Entry(new Value(46), new Label('Gold')))
                ->start(10),
            new Entry(new Value(37), new Label('Silver')),
            new Entry(new Value(38), new Label('Bronze')),
        ]),
    );
}

图例

use Maartenpaauw\Chartscss\Legend\Legend;

// ...

protected function legend(): Legend
{
    return parent::legend()
        ->withLabel('Gold')
        ->withLabels(['Silver', 'Bronze'])
        ->inline()
        ->ordered()
        ->squares();
}

默认情况下，不会生成和显示图例。您可以通过覆盖 legend() 方法来更改此行为。通过在 Legend 实例上调用 withLabel() 或 withLabels() 方法，您可以添加标签。默认情况下，图例是垂直显示的。您可以通过链式调用 inline() 方法将其改为水平显示。

标签默认没有样式。您可以通过调用以下方法之一来更改形状：

  • circles()
  • ellipses()
  • lines()
  • rectangles()
  • rhombuses()
  • squares()

默认情况下，使用 HTML 标签 ul 显示图例。如果您更喜欢 ol HTML 标签，则链式调用 ordered() 方法。

调色板

警告！不要忘记将 <x-charts-css-stylesheet /> 添加到布局的头部。

use Maartenpaauw\Chartscss\Appearance\Colorscheme\Color;
use Maartenpaauw\Chartscss\Appearance\Colorscheme\ColorschemeContract;

// ...

protected function colorscheme(): ColorschemeContract
{
    return parent::colorscheme()
        ->add(new Color('#FF0000'))
        ->add(new Color('#00FF00'))
        ->add(new Color('#0000FF'));
}

框架有一组10种默认颜色，这些颜色会重复。您可以通过覆盖 colorscheme() 方法来更改它。

如果您只添加一种颜色，所有数据条目将获得相同的颜色。您可以通过在调色板上调用 add() 方法添加多达10种颜色。

use Maartenpaauw\Chartscss\Appearance\Colorscheme\Color;
use Maartenpaauw\Chartscss\Appearance\Colorscheme\ColorschemeContract;

// ...

protected function colorscheme(): ColorschemeContract
{
    return new Colorscheme([
        new Color('#FF0000'),
        new Color('#00FF00'),
        new Color('#0000FF'),
    ]);
}

您还可以返回一个新的 Colorscheme 实例，并将颜色数组作为第一个构造函数参数。

特定条目的颜色

use Maartenpaauw\Chartscss\Appearance\Colorscheme\Color;
use Maartenpaauw\Chartscss\Data\Axes\Axes;
use Maartenpaauw\Chartscss\Data\Datasets\Dataset;
use Maartenpaauw\Chartscss\Data\Datasets\Datasets;
use Maartenpaauw\Chartscss\Data\Datasets\DatasetsContract;
use Maartenpaauw\Chartscss\Data\Entries\Entry;
use Maartenpaauw\Chartscss\Data\Entries\Value\Value;
use Maartenpaauw\Chartscss\Data\Label\Label;

// ...

protected function datasets(): DatasetsContract
{
    return new Datasets(
        new Axes('Type', 'Amount'),
        new Dataset([
            (new Entry(new Value(46), new Label('Gold')))
                ->color(new Color('#FFD700')), // <--
            new Entry(new Value(37), new Label('Silver')),
            new Entry(new Value(38), new Label('Bronze')),
        ]),
    );
}

想要更改特定数据条目的颜色？可以通过链式调用 color 方法来完成。

修改

通过覆盖 modifications() 方法，您可以添加多个修改。

默认情况下，当存在标题时，将应用 ShowHeading 修改；当配置了多个数据集时，将应用修改 Multiple 和 ShowLabels。

所有修改都可以在 Maartenpaauw\Chartscss\Appearance 命名空间中找到。

数据（集）间距

use Maartenpaauw\Chartscss\Appearance\DatasetsSpacing;
use Maartenpaauw\Chartscss\Appearance\DataSpacing;
use Maartenpaauw\Chartscss\Appearance\Modifications;

// ...

protected function modifications(): Modifications
{
    return parent::modifications()
        ->add(new DataSpacing(10))
        ->add(new DatasetsSpacing(20));
}

通过添加 DatasetsSpacing 或 DataSpacing，您可以配置数据条目之间的空间。两个构造函数都接受一个介于1到20之间的数字，定义空间量。

隐藏数据

use Maartenpaauw\Chartscss\Appearance\HideData;
use Maartenpaauw\Chartscss\Appearance\Modifications;

// ...

protected function modifications(): Modifications
{
    return parent::modifications()
        ->add(new HideData());
}

HideData 修改将隐藏每个条目的显示值。值仍然会被打印到屏幕上，但将通过 CSS 隐藏。这将尊重屏幕阅读器。

悬停时显示数据

use Maartenpaauw\Chartscss\Appearance\Modifications;
use Maartenpaauw\Chartscss\Appearance\ShowDataOnHover;

// ...

protected function modifications(): Modifications
{
    return parent::modifications()
        ->add(new ShowDataOnHover());
}

ShowDataOnHover 修改将像 HideData 修改一样隐藏数据。最大的不同是，当您悬停时，它将显示数据。

标签对齐

use Maartenpaauw\Chartscss\Appearance\LabelsAlignCenter;
use Maartenpaauw\Chartscss\Appearance\LabelsAlignEnd;
use Maartenpaauw\Chartscss\Appearance\LabelsAlignStart;
use Maartenpaauw\Chartscss\Appearance\Modifications;

// ...

protected function modifications(): Modifications
{
    return parent::modifications()
        ->add(new LabelsAlignStart())
        ->add(new LabelsAlignCenter())
        ->add(new LabelsAlignEnd());
}

您可以通过添加以下修改之一来配置标签对齐：LabelsAlignStart、LabelsAlignCenter 或 LabelsAlignRight。

多个

use Maartenpaauw\Chartscss\Appearance\Modifications;
use Maartenpaauw\Chartscss\Appearance\Multiple;

// ...

protected function modifications(): Modifications
{
    return parent::modifications()
        ->add(new Multiple());
}

当显示多个数据集时，需要添加 Multiple 修改。默认情况下，如果有多个数据集，则自动添加。

反转

use Maartenpaauw\Chartscss\Appearance\Modifications;
use Maartenpaauw\Chartscss\Appearance\ReverseData;
use Maartenpaauw\Chartscss\Appearance\ReverseDatasets;
use Maartenpaauw\Chartscss\Appearance\ReverseOrientation;

// ...

protected function modifications(): Modifications
{
    return parent::modifications()
        ->add(new ReverseData())
        ->add(new ReverseDatasets())
        ->add(new ReverseOrientation());
}

如果您想反转数据、数据集或方向，可以添加修改：ReverseData、ReverseDatasets 或/和 ReverseOrientation。

坐标轴

use Maartenpaauw\Chartscss\Appearance\Modifications;
use Maartenpaauw\Chartscss\Appearance\ShowDataAxes;
use Maartenpaauw\Chartscss\Appearance\ShowPrimaryAxis;
use Maartenpaauw\Chartscss\Appearance\ShowSecondaryAxes;

// ...

protected function modifications(): Modifications
{
    return parent::modifications()
        ->add(new ShowDataAxes())
        ->add(new ShowPrimaryAxis())
        ->add(new ShowSecondaryAxes());
}

默认情况下，不会显示坐标轴。您可以通过添加 ShowPrimaryAxis 来显示主坐标轴。对于 ShowDataAxes 也是一样。

要显示次坐标轴，您可以添加 ShowSecondaryAxes 修改。构造函数接受坐标轴的数量（最多10个）作为第一个参数。

显示标题

use Maartenpaauw\Chartscss\Appearance\Modifications;
use Maartenpaauw\Chartscss\Appearance\ShowHeading;

// ...

protected function modifications(): Modifications
{
    return parent::modifications()
        ->add(new ShowHeading());
}

标题（表格标题）将始终打印到屏幕上以尊重屏幕阅读器，但默认情况下将通过 CSS 隐藏。如果您想显示标题，则需要添加 ShowHeading 修改。当存在标题时，此修改将自动添加。

显示标签

use Maartenpaauw\Chartscss\Appearance\Modifications;
use Maartenpaauw\Chartscss\Appearance\ShowLabels;

// ...

protected function modifications(): Modifications
{
    return parent::modifications()
        ->add(new ShowLabels());
}

标签将始终打印到屏幕上以尊重屏幕阅读器，但它们默认使用CSS隐藏。如果您想显示标签，需要添加ShowLabels修改。

堆叠

use Maartenpaauw\Chartscss\Appearance\Modifications;
use Maartenpaauw\Chartscss\Appearance\Stacked;

// ...

protected function modifications(): Modifications
{
    return parent::modifications()
        ->add(new Stacked());
}

如果您想堆叠多个数据集，可以添加Stacked修改。如果您将数据集实例包裹在SimpleStackedDatasets或PercentageStackedDatasets装饰器中，这会自动完成（通过智能配置）。

我是否遗漏添加修改了？

use Maartenpaauw\Chartscss\Appearance\CustomModification;
use Maartenpaauw\Chartscss\Appearance\Modifications;

// ...

protected function modifications(): Modifications
{
    return parent::modifications()
        ->add(new CustomModification('foo'));
}

请随意创建一个拉取请求或提交一个问题。在此期间，您可以通过添加CustomModification轻松添加。

配置

如前所述，配置非常智能。如果存在标题，它会添加ShowHeading修改；如果存在多个数据集，它会添加Multiple修改；如果定义了数据集或条目标签，它会添加ShowLabels修改；如果未指定，它使用配置的数据轴作为图例标签。

如果您将数据集实例包裹在SimpleStackedDatasets或PercentageStackedDatasets装饰器中，它会自动添加Stacked修改。

这是通过将配置包裹在SmartConfiguration装饰器中完成的。如果您不希望这种行为，您可以覆盖configuration方法并自己构建配置。

use Maartenpaauw\Chartscss\Configuration\Configuration;
use Maartenpaauw\Chartscss\Configuration\ConfigurationContract;

// ...

protected function configuration(): ConfigurationContract
{
    return new Configuration(
        $this->identity(),
        $this->legend(),
        $this->modifications(),
        $this->colorscheme(),
    );
}

包装div

如果配置了图例，图表将被包裹在div中。如果您想更改HTML标签，可以覆盖tag()方法。

// ...

protected function tag(): string
{
    return 'article';
}

测试

composer test

变更日志

有关最近更改的更多信息，请参阅变更日志。

贡献

有关详细信息，请参阅贡献指南。

安全漏洞

请审查我们的安全策略，了解如何报告安全漏洞：我们的安全策略。

鸣谢

许可

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