Panduan praktikal PHP dan Vue.js: Cara menggunakan fungsi carta statistik dalam projek-tutorial php-php.cn

Panduan praktikal PHP dan Vue.js: Cara menggunakan fungsi carta statistik dalam projek

王林

Lepaskan： 2023-08-18 15:10:01

asal

1054 orang telah melayarinya

Panduan praktikal PHP dan Vue.js: Cara menggunakan fungsi carta statistik dalam projek

Panduan Praktikal PHP dan Vue.js: Cara Memohon Fungsi Carta Statistik dalam Projek

Gambaran Keseluruhan
Dalam aplikasi web moden, carta dan statistik adalah sangat penting. Mereka membantu kami menggambarkan data untuk memahami dan menganalisisnya dengan lebih baik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan fungsi carta statistik dalam projek anda menggunakan PHP dan Vue.js.

Prasyarat
Sebelum bermula, pastikan anda sudah biasa dengan PHP dan Vue.js. Sementara itu, tutorial ini akan menggunakan teknologi dan alatan berikut:

PHP 7+
Vue.js 2+
Chart.js

Langkah 1: Buat Struktur Projek
Mula-mula, buat direktori projek baharu dalam Fail dan folder berikut dibuat secara dalaman:

index.html: Fail HTML digunakan untuk memaparkan carta index.html：用于展示图表的HTML文件
scripts/

skrip/

Langkah 2: Pasang Chart.js

Buka terminal dalam direktori akar projek dan laksanakan arahan berikut untuk memasang Chart.js:

$ npm install chart.js

Salin selepas log masuk

Langkah 3: Cipta fail index.html

Dalam indeks .html fail , kami akan mencipta komponen mudah menggunakan Vue.js dan memaparkan carta menggunakan Chart.js. Selain itu, fail JavaScript Vue.js dan Chart.js perlu diperkenalkan.

<!DOCTYPE html>
<html>
<head>
  <title>统计图表功能</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="scripts/chart.js"></script>
</head>
<body>
  <div id="app">
    <canvas id="chart"></canvas>
  </div>
  <script src="app.js"></script>
</body>
</html>

Salin selepas log masuk

Langkah 4: Buat fail app.js

Buat fail JavaScript bernama app.js dalam folder skrip. Dalam fail ini, kami akan mencipta tika Vue dan menggunakan Chart.js dalam cangkuk kitaran hayat yang dipasang untuk memaparkan carta.

new Vue({
  el: '#app',
  mounted: function() {
    var ctx = document.getElementById('chart').getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: '数据集',
          data: [10, 20, 30, 40, 50, 60, 70],
          backgroundColor: '#FF6384',
          borderColor: '#FF6384',
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  }
});

Salin selepas log masuk

Langkah 5: Jalankan projek

Buka terminal dalam direktori akar dan laksanakan arahan berikut untuk memulakan pelayan setempat:

$ php -S localhost:8000

Salin selepas log masuk

Kemudian lawati http://localhost:8000/index.html dalam penyemak imbas anda dan anda akan lihat Pergi ke halaman yang mengandungi carta statistik.

Kesimpulan

Artikel ini memperkenalkan cara menggunakan PHP dan Vue.js untuk menggunakan fungsi carta statistik dalam projek. Kami menggunakan pustaka Chart.js untuk membuat dan memaparkan carta, dan menggabungkannya dengan rangka kerja Vue.js untuk mengatur kod dan mengurus data. Saya harap panduan ini akan membantu anda untuk menggunakan fungsi carta statistik dalam projek sebenar. 🎜

Atas ialah kandungan terperinci Panduan praktikal PHP dan Vue.js: Cara menggunakan fungsi carta statistik dalam projek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!