Cara melaksanakan carta statistik penunjuk ekonomi visual dalam PHP dan Vue.js-tutorial php-php.cn

Cara melaksanakan carta statistik penunjuk ekonomi visual dalam PHP dan Vue.js

WBOY

Lepaskan： 2023-08-18 17:50:02

asal

1394 orang telah melayarinya

Cara melaksanakan carta statistik penunjuk ekonomi visual dalam PHP dan Vue.js

Cara untuk melaksanakan carta statistik penunjuk ekonomi visual dalam PHP dan Vue.js

Dengan pembangunan data besar dan analisis data, carta statistik data ekonomi visual telah menarik lebih banyak perhatian. Dalam pembangunan web, PHP sebagai bahasa back-end dan Vue.js sebagai rangka kerja front-end menyediakan gabungan hebat yang boleh digunakan untuk mencapai matlamat tersebut. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue.js untuk mencipta carta statistik visual penunjuk ekonomi, dengan contoh kod.

Persediaan
Pertama, kita perlu memasang persekitaran pembangunan PHP dan Vue.js. Pastikan anda telah memasang PHP, serta persekitaran pembangunan bersepadu seperti XAMPP atau WAMP yang menyediakan pelayan Apache dan pangkalan data MySQL. Selain itu, kami juga perlu menggunakan npm untuk memasang dan mengurus Vue.js.
Buat pangkalan data dan jadual data
Buat pangkalan data dalam MySQL untuk menyimpan data pada penunjuk ekonomi. Sebagai contoh, kami menggunakan pangkalan data bernama "ekonomi" dan mencipta jadual data bernama "penunjuk" yang mengandungi medan "id", "nama", "nilai" dan "tahun". Sila ubah suai struktur jadual mengikut keperluan anda.
Menulis kod PHP
Dalam PHP, kita boleh menggunakan sambungan mysqli untuk menyambung ke pangkalan data dan mendapatkan data tentang penunjuk ekonomi dengan menanyakan pangkalan data. Berikut ialah contoh kod mudah:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "economics";

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接数据库失败：" . $conn->connect_error);
}

// 查询数据库获取经济指标数据
$sql = "SELECT * FROM indicators";
$result = $conn->query($sql);

// 将数据转换为JSON格式
$data = array();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

// 输出JSON数据
echo json_encode($data);

// 关闭数据库连接
$conn->close();
?>

Salin selepas log masuk

Mencipta aplikasi Vue.js
Kini, kami boleh menggunakan Vue.js untuk mencipta aplikasi bahagian hadapan kami. Mula-mula, buat fail HTML dan perkenalkan perpustakaan Vue.js dan pustaka Chart.js (digunakan untuk menjana carta statistik). Berikut ialah contoh struktur HTML ringkas:

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

    <script src="app.js"></script>
</body>
</html>

Salin selepas log masuk

Menulis kod Vue.js
Buat fail JavaScript bernama "app.js" untuk pengekodan aplikasi Vue.js. Berikut ialah contoh kod mudah:

new Vue({
    el: '#app',
    mounted() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            // 使用axios库发送GET请求
            axios.get('api.php')
            .then(response => {
                // 获取经济指标数据
                const data = response.data;

                // 处理数据并生成图表
                const ctx = document.getElementById('chart').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: data.map(d => d.year),
                        datasets: [{
                            label: '经济指标',
                            data: data.map(d => d.value),
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true
                    }
                });
            })
            .catch(error => {
                console.log(error);
            });
        }
    }
});

Salin selepas log masuk

Jalankan apl
Letakkan fail HTML dan fail JavaScript dalam direktori yang sesuai, mulakan pelayan Apache anda dan buka fail HTML dalam penyemak imbas anda. Anda akan melihat halaman dengan carta statistik menggambarkan penunjuk ekonomi.

Ringkasan
Dalam artikel ini, kami mempelajari cara menggunakan PHP dan Vue.js untuk mencipta carta statistik visual penunjuk ekonomi. Kami menunjukkan cara untuk menanyakan pangkalan data untuk mendapatkan data melalui PHP, dan menggunakan Vue.js dan Chart.js untuk menjana carta statistik. Dengan menggunakan teknologi ini, anda boleh melaksanakan fungsi statistik visual penunjuk ekonomi dengan mudah. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Cara melaksanakan carta statistik penunjuk ekonomi visual dalam PHP dan Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!