How to display statistical charts on a web page using PHP and Vue.js-PHP Tutorial-php.cn

How to display statistical charts on a web page using PHP and Vue.js

王林

Release： 2023-08-21 09:26:01

Original

1516 people have browsed it

How to display statistical charts on a web page using PHP and Vue.js

How to use PHP and Vue.js to display statistical charts on a web page

Overview:
In modern web development, data visualization has become very important a part of. Statistical charts can visually display the trends and relationships of data, helping users better understand the data. This article mainly introduces how to use PHP and Vue.js to display statistical charts on web pages. Using PHP to process data and Vue.js to render charts, you can quickly and easily implement data visualization functions.

Preparation
Before we start, we need to install PHP and Vue.js, and make sure you are familiar with basic PHP and Vue.js syntax.
Create database and table
First, we need to create a database and create a data table in it to store the data that needs to be displayed. You can use MySQL or other database management systems to accomplish this step.

CREATE DATABASE data_visualization;
USE data_visualization;
CREATE TABLE statistics (
    id INT PRIMARY KEY AUTO_INCREMENT,
    date DATE,
    value INT
);

Copy after login

The above is a simple data table structure, which contains an auto-incrementing id field, date field and numerical field.

Connect to the database and get data
Next, we need to connect to the database and get data from the data table. We can accomplish this step using the MySQLi extension for PHP.

<?php
$host = "localhost";
$username = "root";
$password = "password";
$dbname = "data_visualization";

$conn = new mysqli($host, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$query = "SELECT * FROM statistics";
$result = $conn->query($query);
$data = [];

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $data[] = [
            'date' => $row['date'],
            'value' => $row['value']
        ];
    }
}

$conn->close();

echo json_encode($data);
?>

Copy after login

The above code connects to the database, gets all the data from the data table, and returns it in JSON format.

Use Vue.js to render the chart
Next, we need to use Vue.js to render the chart. We can use a third-party charting library to accomplish this step. Here we use Echarts to display a histogram.

First, introduce the library files of Vue.js and Echarts into HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Data Visualization</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="app">
        <div id="chart" style="width: 600px;height:400px;"></div>
    </div>

    <script>
        new Vue({
            el: '#app',
            mounted() {
                this.loadData();
            },
            methods: {
                loadData() {
                    // 发送Ajax请求获取数据
                    axios.get('data.php')
                    .then(response => {
                        this.renderChart(response.data);
                    })
                    .catch(error => {
                        console.log(error);
                    });
                },
                renderChart(data) {
                    // 使用Echarts绘制柱状图
                    var chart = echarts.init(document.getElementById('chart'));
                    var dates = data.map(item => item.date);
                    var values = data.map(item => item.value);
                    
                    var option = {
                        xAxis: {
                            data: dates
                        },
                        yAxis: {},
                        series: [{
                            name: 'Value',
                            type: 'bar',
                            data: values
                        }]
                    };
                    
                    chart.setOption(option);
                }
            }
        });
    </script>
</body>
</html>

Copy after login

In Vue's mounted hook function, we call the loadData method to send an Ajax request, obtain data, and call the renderChart method to render the chart. In the renderChart method, we use Echarts to draw the histogram. The chart is rendered by extracting the date and value separately and then passing them to Echarts' drawing function.

Run and display
Finally, the above code needs to be deployed to a PHP server and accessed through a browser. When the web page is accessed, data will be automatically obtained from the database and a histogram will be displayed.

Summary:
By using PHP and Vue.js, we can easily display statistical charts on the web page. The data is processed through PHP and returned to the front end in JSON format, and then Vue.js is used to render charts, which can quickly implement data visualization functions. The following is an example of using PHP and Vue.js to display statistical charts. I hope it will be helpful to you.

The above is the detailed content of How to display statistical charts on a web page using PHP and Vue.js. For more information, please follow other related articles on the PHP Chinese website!