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

官方文档 https://charts.erik.cat/installation.html#...
github地址 https://github.com/ConsoleTVs/Charts

安装

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() !!}

显示结果

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

参数说明

$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]));

显示结果

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

去掉填充色

$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]));

显示结果

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

设置线条曲张程度

$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]));

显示结果

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

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

原文地址:https://www.shanyuliang.com/archives/286

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 3

问下 SampleChart 类中统一配置 chart 图的样式 是写到 __construct() 中吗? extends Chart 我这里的Chart报undefined,$this->options的options 同样报undefined

3年前 评论

@MuQ97 继承后要在子类中调用父类的构造方法 parent::__construct(); 这样子类才能用到父类的配置。

3年前 评论

画饼状图的时候想要取消背景的XY轴是要改什么参数,文档看的不是很明白

3年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!