README

(在生产环境中不要使用此包。正在开发新的生产版更新。)

Chart.js是用于Laravel 5.X的JavaScript库。

设置

composer require laggards/laravel-chartjs

然后在您的文件config/app.php中添加服务提供者

Laggards\laravelchartjs\Providers\ChartjsServiceProvider::class

最后，发布包以使用配置文件，允许根据图表类型和数据集动态选择颜色。

php artisan vendor:publish

配置文件

<?php
return [
    'colours' => [
        'bar' => [
            'rgba(220,220,220,0.5)',
            'rgba(151,187,205,0.8)',
            'rgba(24, 164, 103, 0.7)',
        ],
        'pie' => [
            [
                'colour' => "#F7464A",
                'highlight' => "#FF5A5E"
            ],
        ]
    ],
];

在这里，我们有根据图表类型和您将使用的数据集数量进行颜色设置的配置。

目前，您必须安装并将Chartjs库添加到您的布局/模板中，该库可以在以下位置轻松下载：[https://chart.js.cn](https://chart.js.cn)。此设置也将得到改善。

使用

简单使用示例，在视图或其他您想显示图表的地方

1 - 条形图

<div class="container-fluid">
    <canvas id="BarChart" style="width:50%;"></canvas>
</div>

<?php
    $data = array(
        'Jan' => array(33),
        'Feb' => array(32),
        'Mar' => array(12)
    );
?>

{!! app()->chartbar->render("BarChart", $data) !!}

其中 $data 是信息数组，键作为标签，值是信息的值。如果您需要多个数据集 - 即两个数据集具有相同的标签，例如过去和现在的值 - 请在数组值中添加值，例如：'三月' => array (12, 25, ..., n)

2 - 饼图或甜甜圈图

<div class="container-fluid">
    <canvas id="PieChart" style="width:50%;"></canvas>
</div>

<?php
    $data = array(
        'Ferdinand' => 32,
        'Felix' => 37,
        'John' => 12
    );
?>

{!! app()->chartpiedoughnut->render("PieChart", $data, ['type' => 'Doughnut']) !!}

{{-- OR --}}

{!! app()->chartpiedoughnut->render("PieChart", $data, ['type' => 'Pie']) !!}

其中 $data 是信息数组，键作为标签，值是信息的值。颜色和高亮颜色将根据配置文件中定义的随机选择

3 - 雷达图

<div class="container-fluid">
    <canvas id="RadarChart" style="width:50%;"></canvas>
</div>

<?php
    $data = array(
        'Eating' => array(33, 34),
        'Coding' => array(32, 123),
        'Sleeping' => array(12, 90)
    );
?>

{!! app()->chartradar->render("RadarChart", $data) !!}

4 - 折线图

<div class="container-fluid">
    <canvas id="LineChart" style="width:50%;"></canvas>
</div>

<?php
    $data = array(
        'Eating' => array(33, 34),
        'Coding' => array(32, 123),
        'Sleeping' => array(12, 90)
    );
?>

{!! app()->chartline->render("LineChart", $data) !!}

对于图表中的图例，只需像这样使用即可

<div class="container-fluid">
    <canvas id="RadarChart" style="width:50%;"></canvas>
</div>
<!-- For every chart, use a respective css id selector: bar, radar, pie or line -->
<div id="js-legend-bar" class="chart-legend"></div>
<div id="js-legend-pie" class="chart-legend"></div>
<div id="js-legend-line" class="chart-legend"></div>

<?php
// options array with legends to show in this chart
$options['legends'] = ['Marketing', 'IT', 'Stock'];

$data = array(
        'Jan' => array(33.4, 59, 100),
        'Feb' => array(32.8, 45, 150),
        'Mar' => array(12, 38.3, 125)
);

?>
{!! app()->chartbar->render("RadarChart", $data, $options) !!}

待办事项

• 重构以获得更好的JS代码
• 测试
• 极坐标图支持
• 移除框架依赖：仅Illuminate包依赖

注意

此README以及包正在开发中，但将会不断更新，并将在准备好生产版本时立即通知您。感谢您的理解。

如有任何问题或建议，请给我们发邮件：[laggards@foxmail.com](mailto:laggards@foxmail.com)