Hari ini, saya akan memandu Anda cara menambahkan grafik menggunakan Highcharts di laravel 7/6. saya akan menjelaskan langkah demi langkah contoh 7/6 highcharts laravel. Anda cukup menggunakan Line Charts, Bar Charts, Pie Charts, Area Charts dll. kami akan membuat garis highchart dengan laravel 7/6.
Highcharts adalah pustaka js, pustaka ini melalui kita dapat menggunakan bagan batang, bagan garis, bagan area, bagan kolom dll. Highcharts adalah pustaka bagan sumber terbuka. Highcharts juga menyediakan tema dan grafik sevral sehingga Anda dapat menggunakan lebih banyak bagan dari sini: Situs HighCharts .
setiap kali Anda perlu menambahkan grafik di sisi server laravel 6. maka Anda dapat dengan mudah menggunakan contoh berikut ini Anda harus mengambil data dari database dan kemudian mengatur fungsi Highcharts, jadi mari kita lihat bagaimana menggunakan Highcharts di larave dengan contoh yang tepat.
Buat Route:
pertama-tama kita akan membuat route sederhana untuk membuat grafik garis sederhana. jadi mari kita tambahkan route sederhana seperti di bawah ini:
routes/web.php
Route::get('chart', 'ChartController@index');Buat Controller:
Di sini, kita akan membuat controller baru sebagai ChartController. jadi mari kita tambahkan kode di bawah ini pada file pengontrol itu.
app/Http/Controllers/ChartController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class ChartController extends Controller
{
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function index()
{
$users = User::select(\DB::raw("COUNT(*) as count"))
->whereYear('created_at', date('Y'))
->groupBy(\DB::raw("Month(created_at)"))
->pluck('count');
return view('chart', compact('users'));
}
}Buat Blade File:
di sini, kita perlu membuat file blade dan dalam file blade ini kita menggunakan js highchart dan menggunakan kode mereka.
resources/views/chart.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 6 Highcharts Example - Medikre.com</title>
</head>
<body>
<h1>Laravel 6 Highcharts Example - Medikre.com</h1>
<div id="container"></div>
</body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
var users = <?php echo json_encode($users) ?>;
Highcharts.chart('container', {
title: {
text: 'New User Growth, 2019'
},
subtitle: {
text: 'Source: medikre.com.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Number of New Users'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
allowPointSelect: true
}
},
series: [{
name: 'New Users',
data: users
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
</script>
</html>Buat Dummy Records:
Di sini, kita perlu menambahkan beberapa data dummy di tabel users sebagai data bulanan. Anda harus membuat users pada setiap bulan dengan tanggal dibuat seperti di bawah ini:
Ok, sekarang Anda dapat menjalankan dan memeriksa grafik.
Saya harap ini dapat membantu Anda ...
highlight laravel 7 laravel 6 laravel highchart
andriajah