Laravel使用ConsoleTVs/Charts简单快速绘制统计图

  • 2019-06-21
  • 0
  • 0

官方文档github

安装

composer安装

composer require consoletvs/charts:6.*

发布配置

php artisan vendor:publish –tag=charts_config

开始使用

创建类

php artisan make:chart {Name} {Library?}

eg:

php artisan make:chart SampleChart Chartjs

说明
Name:类名
Library:使用的依赖包,默认 Chartjs

可以在SampleChart类中配置chart图的样式

$this->options([
    'maintainAspectRatio' => false,
    'scales'              => [
        'xAxes' => [],
        'yAxes' => [
            [
                'ticks' => [
                    'beginAtZero' => true,
                ],
            ],
        ],
    ],
]);

开始绘图

后端

$chart = new SampleChart;
$chart->labels(['One', 'Two', 'Three']); // X轴数据
$chart->title('线形图');  //标题
$chart->dataset('My dataset 1', 'line', [1, 2, 3, 4]);
$chart->dataset('My dataset', 'line', [1, 2, 3, 4]);
$chart->dataset('My dataset 2', 'line', [4, 3, 2, 1]);

return view('sample_view', ['chart' => $chart]));

前端

<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
    {!! $chart->container() !!}
</div>

js,记得在js输出前引入js

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js" charset="utf-8"></script>
{!! $chart->script() !!}

显示结果

参数说明

$chart->dataset(string $name, string $type, $data);
//$name 名称
//$type 类型,line 线性、bar 柱状、pie 饼状等
//$data 数据 Y轴数据

设置颜色

$chart = new SampleChart;
$chart->labels(['One', 'Two', 'Three']);
$chart->title('线形图');
$chart->dataset('My dataset 1', 'line', [4, 6, 3, 8])->backgroundColor('#B4E1CD')->color('#B4E1CD');
$chart->dataset('My dataset', 'line', [4, 2, 6, 9])->backgroundColor('#FCCDAC')->color('#FCCDAC');
$chart->dataset('My dataset 2', 'line', [3, 7, 2, 5])->backgroundColor('#C7D6EA')->color('#C7D6EA');

return view('sample_view', ['chart' => $chart]));

显示结果

去掉填充色

$chart = new SampleChart;
$chart->labels(['One', 'Two', 'Three']);
$chart->title('线形图');
$chart->dataset('My dataset 1', 'line', [4, 6, 3, 8])->backgroundColor('#B4E1CD')->color('#B4E1CD')->fill(false);
$chart->dataset('My dataset', 'line', [4, 2, 6, 9])->backgroundColor('#FCCDAC')->color('#FCCDAC')->fill(false);
$chart->dataset('My dataset 2', 'line', [3, 7, 2, 5])->backgroundColor('#C7D6EA')->color('#C7D6EA')->fill(false);

return view('sample_view', ['chart' => $chart]));

显示结果

设置线条曲张程度

$chart = new SampleChart;
$chart->labels(['One', 'Two', 'Three']);
$chart->title('线形图');
$chart->dataset('My dataset 1', 'line', [4, 6, 3, 8])->backgroundColor('#B4E1CD')->color('#B4E1CD')->fill(false)->lineTension(0.1);
$chart->dataset('My dataset', 'line', [4, 2, 6, 9])->backgroundColor('#FCCDAC')->color('#FCCDAC')->fill(false)->lineTension(0.1);
$chart->dataset('My dataset 2', 'line', [3, 7, 2, 5])->backgroundColor('#C7D6EA')->color('#C7D6EA')->fill(false)->lineTension(0.1);

return view('sample_view', ['chart' => $chart]));

显示结果

 

目前只列出了一些目前使用到的情况,还有更多的图形和用法有待你去体验哦。。。

评论

还没有任何评论,你来说两句吧