Rumah > rangka kerja php > Laravel > Bagaimana untuk menambah carta bar dalam projek laravel

Bagaimana untuk menambah carta bar dalam projek laravel

PHPz
Lepaskan: 2023-04-23 09:50:29
asal
714 orang telah melayarinya

Laravel ialah rangka kerja pembangunan aplikasi web PHP yang digunakan secara meluas Ia menyediakan pelbagai alatan dan fungsi yang membolehkan pembangun mencipta aplikasi web yang cekap dan berskala. Ini termasuk alat visualisasi data yang boleh melaksanakan histogram melalui Laravel.

Penggambaran data ialah teknologi yang sangat penting yang menjadikan data lebih mudah difahami dan dianalisis. Carta bar ialah salah satu cara yang paling biasa untuk menggambarkan data. Laravel menyediakan beberapa kaedah untuk melaksanakan histogram. Berikut ialah pengenalan ringkas kepada dua kaedah:

Kaedah pertama: Gunakan pakej sambungan Carta Laravel

Carta Laravel ialah pakej sambungan Laravel yang dibina berdasarkan perpustakaan Chart.js. Ia boleh menjana pelbagai jenis carta dengan mudah, termasuk carta bar, carta garis, carta pai, dsb. Ia menyokong pilihan konfigurasi yang kaya, seperti warna, label, paksi koordinat, dsb., dan boleh menyesuaikan serta mencantikkan carta.

Menggunakan Carta Laravel adalah sangat mudah, cuma tambah kebergantungan dalam fail composer.json:

“consoletvs/charts”: “~6.0”,
Salin selepas log masuk

Kemudian jalankan pemasangan komposer dalam terminal untuk melengkapkan pemasangan pakej. Selepas pemasangan selesai, anda boleh menggunakan kod berikut untuk menjana histogram:

use ConsoleTVs\Charts\Facades\Charts;

$chart = Charts::create('bar', 'highcharts')
             ->title('Monthly Sales')
             ->elementLabel('Total Sales')
             ->labels(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'])
             ->values([50, 70, 80, 90, 100, 120]);

return view('sales', ['chart' => $chart]);
Salin selepas log masuk

Kod ini akan menjana histogram bertajuk "Jualan Bulanan", dengan paksi mendatar ialah bulan dan paksi menegak ialah jualan itu. Melalui kod di atas, penjanaan histogram boleh dicapai dengan mudah.

Cara kedua: Gunakan perpustakaan JavaScript

Selain menggunakan pakej sambungan Carta Laravel, anda juga boleh menggunakan perpustakaan JavaScript untuk melaksanakan histogram. Pada masa ini, perpustakaan JavaScript yang paling biasa termasuk Chart.js, Highcharts, ECharts, dll. Perpustakaan ini boleh digunakan melalui CDN atau diimport secara tempatan.

Mengambil Chart.js sebagai contoh, anda boleh menjana histogram melalui kod berikut:

<canvas id="myChart"></canvas>
Salin selepas log masuk
var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [
            {
                label: 'Monthly Sales',
                data: [50, 70, 80, 90, 100, 120],
                backgroundColor: 'rgba(0, 119, 204, 0.5)',
                borderColor: 'rgba(0, 119, 204, 1)',
                borderWidth: 1
            }
        ]
    }
});
Salin selepas log masuk

Dengan kod di atas, anda boleh menjana carta bar dengan ID "myChart" dalam kanvas halaman HTML, dan kemudian jana histogram melalui kod JavaScript dan berikannya ke kanvas.

Ringkasan:

Di atas ialah dua kaedah menggunakan Laravel untuk melaksanakan histogram. Anda boleh memilih kaedah yang sesuai mengikut keperluan anda sendiri Penggambaran data boleh menjadikan data lebih intuitif Menguasai teknologi ini adalah penting untuk membangunkan aplikasi web yang cekap dan ringkas.

Atas ialah kandungan terperinci Bagaimana untuk menambah carta bar dalam projek laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan