README

Chart.wire 是用于 Laravel Livewire 的简单图表。

• 要求
• 安装
• 使用
• 变更日志
• 贡献
• 安全
• 许可证

要求 ^

此包需要以下包/库

• Alpine.js
• Chart.js
• Laravel Livewire

安装 ^

您可以通过 composer 安装此包

composer require opensaucesystems/chartwire

使用 ^

Chart.wire 支持以下类型的图表

• 折线图
• 柱状图
• 饼图
• 饼图
• 面积图
• Sparkline 图表

每个图表都附带一个自己的 "模型" 类，允许您定义图表的数据和渲染行为。

• 折线图使用 LineChartModel
• 柱状图使用 BarChartModel
• 饼图使用 DoughnutChartModel
• 饼图使用 PieChartModel
• 面积图使用 AreaChartModel
• Sparkline 图表使用 SparklineChartModel

例如，要渲染折线图，我们创建一个 LineChartModel 实例并将其传递给 Livewire 折线图组件

$colors = new \Opensaucesystems\Chartwire\Values\ColorValue([
    'background' => 'rgba(54, 162, 235, 0.6)',
    'border' => 'rgba(54, 162, 235, 0.6)',
    'pointBackground' => 'rgba(54, 162, 235, 0.6)',
]);

$lineChartModel = (new \Opensaucesystems\Chartwire\Models\LineChartModel())
    ->addDataToDataset('Populations 2020', 1405544000, 'China', $colors)
    ->addDataToDataset('Populations 2020', 1370279686, 'India', $colors)
    ->addDataToDataset('Populations 2020', 330736378, 'United States', $colors)
    ->addDataToDataset('Populations 2020', 269603400, 'Indonesia', $colors)
    ->addDataToDataset('Populations 2020', 220892331, 'Pakistan', $colors)
    ->addDataToDataset('Populations 2020', 212404659, 'Brazil', $colors)
    ->addDataToDataset('Populations 2020', 206139587, 'Nigeria', $colors);

<livewire:line-chartwire :line-chart-model="$lineChartModel" />

图表模型方法 ^

常用方法

这些方法是所有图表模型的共同方法

图例方法

以下图表类型支持这些方法

• 折线图
• 柱状图
• 饼图
• 饼图
• 面积图

轴方法

以下图表类型支持这些方法

• 折线图
• 柱状图
• 饼图
• 饼图
• 面积图

标题方法

以下图表类型支持这些方法

• 折线图
• 柱状图
• 饼图
• 饼图
• 面积图

事件方法

以下图表类型支持这些方法

• 折线图
• 柱状图
• 饼图
• 饼图
• 面积图

当图表上触发类型为 mouseup 或 click 的事件时，Livewire 将发出一个事件，其名称为此方法传入的参数名。它还将传递被点击的标签和值。

$lineChartModel = (new \Opensaucesystems\Chartwire\Models\LineChartModel())
    ->withOnClickEventName('onMyLineChartClicked');

现在您可以在其他组件的 $listeners 属性中注册此事件。

class ShowData extends Component
{
    public $label;
    public $value;

    protected $listeners = ['onMyLineChartClicked' => 'handleMyLineChartClicked'];

    public function handleMyLineChartClicked(array $data)
    {
        $this->label = $data['label'];
        $this->value = $data['value'];
    }
}

堆叠方法

以下图表类型支持这些方法

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

Sparkline 图表 ^

Sparkline 图表实际上是一个带有默认选项的正常 折线图，隐藏了图例、标题、坐标轴、工具提示等。

要设置 Sparline 图表 的高度和宽度，只需使用 CSS。

此示例使用 TailwindCSS

$colors = new \Opensaucesystems\Chartwire\Values\ColorValue([
    'background' => 'rgba(54, 162, 235, 0.6)',
    'border' => 'rgba(54, 162, 235, 0.6)',
])

$sparklineChartModel = (new \Opensaucesystems\Chartwire\Models\SparklineChartModel())
        ->addDataToDataset('Populations 2020', 1405544000, 'China', $colors)
        ->addDataToDataset('Populations 2020', 1370279686, 'India', $colors)
        ->addDataToDataset('Populations 2020', 330736378, 'United States', $colors)
        ->addDataToDataset('Populations 2020', 269603400, 'Indonesia', $colors)
        ->addDataToDataset('Populations 2020', 220892331, 'Pakistan', $colors)
        ->addDataToDataset('Populations 2020', 212404659, 'Brazil', $colors)
        ->addDataToDataset('Populations 2020', 206139587, 'Nigeria', $colors);

<div class="h-10 w-20">
    <livewire:sparkline-chartwire :sparkline-chart-model="$sparklineChartModel" />
</div>

颜色 ^

每个数据集都需要一个 ColorValue 对象。

ColorValue 实例需要一个边框颜色。背景和点背景是可选的。

颜色可以是简单的十六进制、RGB 或它们的颜色名称。

$colors = new \Opensaucesystems\Chartwire\Values\ColorValue([
    'border' => 'rgba(54, 162, 235, 0.6)',
])

由于 Chart.js 支持一个 CanvasGradient 对象，ColorValue 支持一个 LinearGradientValue 对象，该对象将被转换为 JS CanvasGradient 对象。

use Opensaucesystems\Chartwire\Values\ColorStopValue;
use Opensaucesystems\Chartwire\Values\LinearGradientValue;

$backgroundColorStops = [
    new ColorStopValue(['color' => 'rgba(54, 162, 235, 0.6)', 'offset' => 0]),
    new ColorStopValue(['color' => 'rgba(54, 162, 235, 0)', 'offset' => 1]),
];
$borderColorStops = [
    new ColorStopValue(['color' => '#80b6f4', 'offset' => 0]),
    new ColorStopValue(['color' => '#f49080', 'offset' => 1]),
];

$backgroundGradient = new LinearGradientValue([
    'x1' => 0,
    'y1' => 100,
    'x2' => 0,
    'y2' => 370,
    'colorStops' => $backgroundColorStops,
])
$borderGradient = new LinearGradientValue([
    'x1' => 500,
    'y1' => 0,
    'x2' => 100,
    'y2' => 0,
    'colorStops' => $borderColorStops,
]);

多个数据集 ^

您还可以向图表添加多个数据集，这允许您分组数据。

堆叠

堆叠图表允许您看到数据由多个小部分组成。

$colors2010 = new \Opensaucesystems\Chartwire\Values\ColorValue([
    'background' => 'rgba(54, 162, 235, 0.6)',
    'border' => 'rgba(54, 162, 235, 1)',
]);
$colors2020 = new \Opensaucesystems\Chartwire\Values\ColorValue([
    'background' => 'rgba(37, 194, 160, 0.6)',
    'border' => 'rgba(37, 194, 160, 1)',
]);

$barChartModel = (new \Opensaucesystems\Chartwire\Models\BarChartModel())
    ->addDataToDataset('Populations 2010', 1339724852, 'China', $colors2010)
    ->addDataToDataset('Populations 2010', 1182105564, 'India', $colors2010)
    ->addDataToDataset('Populations 2010', 309349689, 'United States', $colors2010)
    ->addDataToDataset('Populations 2010', 237641326, 'Indonesia', $colors2010)
    ->addDataToDataset('Populations 2010', 173510000, 'Pakistan', $colors2010)
    ->addDataToDataset('Populations 2010', 193252604, 'Brazil', $colors2010)
    ->addDataToDataset('Populations 2010', 158258917, 'Nigeria', $colors2010)
    ->addDataToDataset('Populations 2020', 1405544000, 'China', $colors2020)
    ->addDataToDataset('Populations 2020', 1370279686, 'India', $colors2020)
    ->addDataToDataset('Populations 2020', 330736378, 'United States', $colors2020)
    ->addDataToDataset('Populations 2020', 269603400, 'Indonesia', $colors2020)
    ->addDataToDataset('Populations 2020', 220892331, 'Pakistan', $colors2020)
    ->addDataToDataset('Populations 2020', 212404659, 'Brazil', $colors2020)
    ->addDataToDataset('Populations 2020', 206139587, 'Nigeria', $colors2020);

<livewire:bar-chartwire :bar-chart-model="$barChartModel" />

故障排除 ^

图表组件必须放在具有固定高度的容器内。这是因为图表将使用所有给定的垂直空间。需要固定高度才能正确渲染。

<div style="height: 32rem;">
    <livewire:livewire-column-chart .../>
</div>

>注意：如果没有给出固定高度，图表将垂直无限增长。这难道是我们想要的吗？

测试 ^

composer test

变更日志 ^

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

贡献 ^

请参阅 CONTRIBUTING 了解详细信息。

安全 ^

如果您发现任何与安全相关的问题，请通过 ashley@opensauce.systems 发送电子邮件，而不是使用问题跟踪器。

致谢和影响 ^

• Laravel
• Laravel Livewire
• Tailwind CSS
• AlpineJS
• 由 asantibanez 开发的 livewire-charts
• 所有贡献者

许可 ^

MIT 许可证 (MIT)。请参阅 许可文件 了解更多信息。