使用 ConsoleTVs/Charts 簡單快速繪製統計圖

shanyuliang發表於2019-06-21

官方文件 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簡單快速繪製統計圖