laracharts
v1.4
قم بإنشاء الرسوم البيانية الخاصة بك باستخدام مكتبة Laravel Echarts PHP . وهو يدعم مكتبة Echarts.js. يتم تحميل المخططات من خلال WebWorker في الخلفية، بشكل مستقل عن البرامج النصية لواجهة المستخدم ودون التأثير على أداء الصفحة.
php artisan vendor:publish
Provider: Apapazisis Echarts EchartsServiceProvider<script src="{{ asset ( ' js/echarts.min.js ' ) }}"></script> <!-- Download the Echarts library -->
<script src="{{ asset ( ' vendor/charts/charts.js ' )}}"></script>Route:: get ( ' / ' , function ()
{
$ testChart = new App Charts TestChart ();
$ testChart2 = new App Charts Test2Chart ();
return view ( ' welcome ' , compact ( ' testChart ' , ' testChart2 ' ));
});
Route:: post ( ' /data ' , function ( Illuminate Http Request $ request )
{
$ class = ' App \ Charts \' . $ request -> get ( ' chartClass ' );
$ chart = ( new $ class )-> make ( $ request -> except ( ' chartClass ' ));
return response ()-> json (
$ chart -> get ()
);
}); <body>
<div class="flex-center position-ref full-height">
<div class="content">
{!! $ testChart ->render() !!}
{!! $ testChart2 ->render() !!}
1 o <input type="text" onchange="{{ $ testChart -> id }}CreateOrUpdateChart({'date': ' 2019-01-01 ' })">
2 o <input type="text" onchange="{{ $ testChart2 -> id }} CreateOrUpdateChart ()">
</div>
</div>
</body> namespace App Charts ;
use Apapazisis Echarts Classes BaseChart ;
use Carbon Carbon ;
class TestChart extends BaseChart
{
public $ id = ' kjdshksdjfsjdfg ' ;
protected $ date = null ; // it is used for filtering
protected $ data = [];
public function __construct ()
{
$ this -> setRoute (); // Set the route
parent :: __construct ();
}
public function make ( $ filters = [])
{
return $ this
-> setFilters ( $ filters ) // first we set the filters and then we can use them wherever we want in other functions
-> setData ()
-> setOptions ()
-> setDataset ()
;
}
public function setData ()
{
if ( isset ( $ this -> date )){
$ i = 25 ;
} else {
$ i = 10 ;
}
$ this -> data [ ' mailsentdates ' ] = [ $ i , 20 , 30 ];
$ this -> data [ ' accessclearingdate ' ] = [ 3 , 6 , 9 ];
return $ this ;
}
public function setDataset ()
{
$ this -> dataset ( ' Sales1 ' , ' bar ' , $ this -> data [ ' mailsentdates ' ])-> options ([
' itemStyle ' => [
' normal ' => [
' color ' => ' function (params){console.log(params);if (params.dataIndex > 0) return "red"; else return "green";} ' ,
' barBorderColor ' => ' gray ' ,
' barBorderWidth ' => 0 ,
' label ' => [
' show ' => true ,
' position ' => ' top ' ,
' textStyle ' => [
' fontWeight ' => 500
],
' color ' => ' gray ' ,
' formatter ' => ' function(params){var array = ' . json_encode ( $ this -> data [ ' mailsentdates ' ]) . ' ; return params.data + array[params.dataIndex];} '
]
]
]
]);
$ this -> dataset ( ' Sales2 ' , ' bar ' , $ this -> data [ ' accessclearingdate ' ])-> options ([
' itemStyle ' => [
' normal ' => [
' color ' => ' function (params){console.log(window. ' . $ this -> id . ' Options);if (params.dataIndex > 0) return "yellow"; else return "blue";} ' ,
' barBorderColor ' => ' gray ' ,
' barBorderWidth ' => 0 ,
' label ' => [
' show ' => true ,
' position ' => ' top ' ,
' textStyle ' => [
' fontWeight ' => 500
],
' color ' => ' gray '
]
]
]
]);
return $ this ;
}
public function setOptions ()
{
if ( isset ( $ this -> date )) {
$ data = [ ' apos ' , ' xlbl2 ' , ' xlbl3 ' ];
} else {
$ data = [ ' xlbl1 ' , ' xlbl2 ' , ' xlbl3 ' ];
}
$ this -> options ([
' title ' => [
' text ' => ' The title ' ,
' show ' => true
],
' tooltip ' => [
' trigger ' => ' axis ' ,
' axisPointer ' => [
' type ' => ' cross '
]
],
' toolbox ' => [
' feature ' => [
' saveAsImage ' => [
' show ' => true ,
' title ' => ' save as image ' ,
' pixelRatio ' => 2
]
]
],
' animationEasing ' => ' elasticOut ' ,
' legend ' => [
' data ' => [ ' Sales1 ' , ' Sales2 ' ]
],
' xAxis ' => [
' type ' => ' category ' ,
' data ' => $ data
],
' yAxis ' => [
' type ' => ' value '
],
' grid ' => [
' left ' => ' 0% ' ,
' right ' => ' 0% ' ,
' bottom ' => ' 0% ' ,
' containLabel ' => true
]
]);
return $ this ;
}
public function setRoute ()
{
$ this -> route = url ( ' data ' );
return $ this ;
}
public function setFilters ( $ filters )
{
$ this -> date = isset ( $ filters [ ' date ' ]) ? Carbon:: parse ( $ filters [ ' date ' ])-> startOfWeek () : null ;
return $ this ;
}
}
