Bagaimana untuk menjana carta statistik interaktif melalui antara muka php dan ECharts-tutorial php-php.cn

Rumah

pembangunan bahagian belakang

tutorial php

Bagaimana untuk menjana carta statistik interaktif melalui antara muka php dan ECharts

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Dec 18, 2023 pm 01:07 PM

echartsCarta statistikantara muka php

Bagaimana untuk menjana carta statistik interaktif melalui antara muka php dan ECharts

Dalam aplikasi moden, visualisasi data menjadi semakin popular. Carta statistik ialah cara terbaik untuk menggambarkan data dan boleh membantu pengguna memahami arah aliran data dengan mudah. ECharts ialah rangka kerja carta bahagian hadapan yang berkuasa yang menyediakan jenis carta yang kaya dan fungsi interaktif. Php ialah bahasa bahagian belakang yang sangat popular yang memudahkan untuk menjana kandungan dan antara muka dinamik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan antara muka PHP dan ECharts untuk menjana carta statistik interaktif, dan menyediakan contoh kod khusus.

1. Apakah antara muka php?

Antara muka ialah mekanisme yang membolehkan komunikasi antara sistem yang berbeza. Dalam pembangunan web, antara muka menghubungkan aplikasi yang berbeza bersama-sama dan memudahkan untuk memindahkan data antara sistem yang berbeza. Biasanya, aplikasi web menyediakan API (Antara Muka Pengaturcaraan Aplikasi) untuk membenarkan aplikasi pihak ketiga menggunakan data dan fungsinya. PHP ialah bahasa yang hebat untuk menyediakan API kerana ia boleh berinteraksi dengan pangkalan data dengan mudah dan mempunyai kemudahalihan kod yang hebat.

2. Apakah itu ECharts?

ECharts ialah perpustakaan carta JavaScript sumber terbuka yang boleh menjana pelbagai jenis carta dan mempunyai pelbagai ciri interaktif. Kerana ia dibina pada JavaScript, ia boleh dipaparkan dengan mudah pada halaman web dan berfungsi dengan baik dengan rangka kerja JavaScript lain seperti jQuery. ECharts menyediakan API yang kaya yang memudahkan untuk menyesuaikan carta dan menyediakan pelbagai cara untuk memuatkan data.

3. Bagaimana untuk menggunakan antara muka php dan ECharts untuk menjana carta statistik interaktif?

Di bawah ini kami akan memperkenalkan cara menggunakan antara muka php dan ECharts untuk menjana carta statistik interaktif adalah seperti berikut:

1 Pemerolehan data

Pertama, kita perlu mendapatkan data daripada pangkalan data atau sumber data lain. Ini boleh dilakukan melalui PHP dan memerlukan penukaran data ke dalam format JSON. Berikut ialah contoh kod untuk menukar data dalam pangkalan data MySQL ke dalam format JSON:

    <?php
        $servername = "localhost";
        $username = "username";
        $password = "password";
        $dbname = "myDB";
 
        // 创建连接
        $conn = new mysqli($servername, $username, $password, $dbname);
 
        // 检查连接
        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }
 
        // 查询数据库
        $sql = "SELECT id, firstname, lastname, email FROM MyGuests";
        $result = $conn->query($sql);
 
        // 将结果转换为JSON格式
        $data = array();
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                $data[] = $row;
            }
        }
        $json_data = json_encode($data);
 
        // 关闭连接
        $conn->close();
    ?>

2. Penjanaan carta

Dalam antara muka PHP, kita boleh mengembalikan data JSON ke bahagian hadapan, dan bahagian hadapan menggunakan data sebagai sumber data ECharts. Berikut ialah kod sampel untuk menggunakan ECharts untuk menjana carta garis:

    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts图表示例</title>
        <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                title: {
                    text: '折线图示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'line',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
            myChart.setOption(option);
        </script>
    </body>
    </html>

Dalam kod sampel di atas, kami mencipta objek ECharts (melalui kaedah init), dan menggunakan objek pilihan untuk mengkonfigurasi pelbagai sifat carta ( tajuk, lagenda, paksi x dan paksi-y, dsb.). Kami juga menentukan tatasusunan yang mengandungi data jualan dan menghantarnya kepada siri carta (melalui sifat siri).

3. Interaksi data

Akhir sekali, kami perlu menghantar data dari antara muka PHP ke bahagian hadapan melalui Ajax atau kaedah lain. Berikut ialah contoh memuatkan data ke dalam carta ECharts menggunakan jQuery dan Ajax:

    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts图表示例</title>
        <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script>
        <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            $.getJSON("data.php", function(data) {
                var option = {
                    title: {
                        text: '折线图示例'
                    },
                    tooltip: {},
                    legend: {
                        data:['销量']
                    },
                    xAxis: {
                        data: data.categories
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'line',
                        data: data.data
                    }]
                };
                myChart.setOption(option);
            });
        </script>
    </body>
    </html>

Dalam contoh kod di atas, kami menggunakan fungsi getJSON jQuery untuk memuatkan data daripada antara muka PHP. Parameter pertama fungsi ini ialah URL yang menunjuk ke antara muka PHP, dan parameter kedua ialah fungsi panggil balik yang menerima data yang diperoleh daripada antara muka PHP dan menggunakannya sebagai sumber data ECharts. Kami juga menukar data ke dalam format yang betul dan memuatkannya ke dalam carta garis menggunakan API ECharts.

Di atas adalah semua langkah tentang cara menggunakan antara muka php dan ECharts untuk menjana carta statistik interaktif Jika anda ingin melaksanakan carta yang lebih kompleks, anda boleh melawati dokumentasi rasmi ECharts, atau mencari lebih banyak contoh dan API dalam ECharts GitHub. repositori.

Atas ialah kandungan terperinci Bagaimana untuk menjana carta statistik interaktif melalui antara muka php dan ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

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

Artikel Berkaitan

Penggunaan PHP yang berterusan: Sebab -sebab ketahanannyaApr 19, 2025 am 12:23 AM

Apa yang masih popular adalah kemudahan penggunaan, fleksibiliti dan ekosistem yang kuat. 1) Kemudahan penggunaan dan sintaks mudah menjadikannya pilihan pertama untuk pemula. 2) Bersepadu dengan pembangunan web, interaksi yang sangat baik dengan permintaan HTTP dan pangkalan data. 3) Ekosistem yang besar menyediakan banyak alat dan perpustakaan. 4) Komuniti aktif dan Sumber Sumber Terbuka menyesuaikan mereka dengan keperluan baru dan trend teknologi.

PHP dan Python: Meneroka Persamaan dan Perbezaan merekaApr 19, 2025 am 12:21 AM

PHP dan Python adalah kedua-dua bahasa pengaturcaraan peringkat tinggi yang digunakan secara meluas dalam pembangunan web, pemprosesan data dan tugas automasi. 1.Php sering digunakan untuk membina laman web dinamik dan sistem pengurusan kandungan, sementara Python sering digunakan untuk membina kerangka web dan sains data. 2.Php Menggunakan Echo ke Kandungan Output, Python Menggunakan Cetakan. 3. Kedua-dua sokongan pengaturcaraan berorientasikan objek, tetapi sintaks dan kata kunci adalah berbeza. 4. PHP menyokong penukaran jenis lemah, manakala Python lebih ketat. 5. Pengoptimuman Prestasi PHP termasuk menggunakan OPCACHE dan pengaturcaraan asynchronous, manakala Python menggunakan pengaturcaraan CProfile dan tak segerak.

PHP dan Python: Paradigma yang berbeza dijelaskanApr 18, 2025 am 12:26 AM

PHP terutamanya pengaturcaraan prosedur, tetapi juga menyokong pengaturcaraan berorientasikan objek (OOP); Python menyokong pelbagai paradigma, termasuk pengaturcaraan OOP, fungsional dan prosedur. PHP sesuai untuk pembangunan web, dan Python sesuai untuk pelbagai aplikasi seperti analisis data dan pembelajaran mesin.

PHP dan Python: menyelam mendalam ke dalam sejarah merekaApr 18, 2025 am 12:25 AM

PHP berasal pada tahun 1994 dan dibangunkan oleh Rasmuslerdorf. Ia pada asalnya digunakan untuk mengesan pelawat laman web dan secara beransur-ansur berkembang menjadi bahasa skrip sisi pelayan dan digunakan secara meluas dalam pembangunan web. Python telah dibangunkan oleh Guidovan Rossum pada akhir 1980 -an dan pertama kali dikeluarkan pada tahun 1991. Ia menekankan kebolehbacaan dan kesederhanaan kod, dan sesuai untuk pengkomputeran saintifik, analisis data dan bidang lain.

Memilih antara php dan python: panduanApr 18, 2025 am 12:24 AM

PHP sesuai untuk pembangunan web dan prototaip pesat, dan Python sesuai untuk sains data dan pembelajaran mesin. 1.Php digunakan untuk pembangunan web dinamik, dengan sintaks mudah dan sesuai untuk pembangunan pesat. 2. Python mempunyai sintaks ringkas, sesuai untuk pelbagai bidang, dan mempunyai ekosistem perpustakaan yang kuat.

PHP dan Rangka Kerja: Memodenkan bahasaApr 18, 2025 am 12:14 AM

PHP tetap penting dalam proses pemodenan kerana ia menyokong sejumlah besar laman web dan aplikasi dan menyesuaikan diri dengan keperluan pembangunan melalui rangka kerja. 1.Php7 meningkatkan prestasi dan memperkenalkan ciri -ciri baru. 2. Rangka kerja moden seperti Laravel, Symfony dan CodeIgniter memudahkan pembangunan dan meningkatkan kualiti kod. 3. Pengoptimuman prestasi dan amalan terbaik terus meningkatkan kecekapan aplikasi.

Impak PHP: Pembangunan Web dan seterusnyaApr 18, 2025 am 12:10 AM

Phphassignificantelympactedwebdevelopmentandextendsbeyondit.1) itpowersmajorplatformslikeworderpressandexcelsindatabaseIntions.2) php'SadaptabilityAldoStoScaleforlargeapplicationFrameworksLikelara.3)

Bagaimanakah jenis membayangkan jenis PHP, termasuk jenis skalar, jenis pulangan, jenis kesatuan, dan jenis yang boleh dibatalkan?Apr 17, 2025 am 12:25 AM

Jenis PHP meminta untuk meningkatkan kualiti kod dan kebolehbacaan. 1) Petua Jenis Skalar: Oleh kerana Php7.0, jenis data asas dibenarkan untuk ditentukan dalam parameter fungsi, seperti INT, Float, dan lain -lain. 2) Return Type Prompt: Pastikan konsistensi jenis nilai pulangan fungsi. 3) Jenis Kesatuan Prompt: Oleh kerana Php8.0, pelbagai jenis dibenarkan untuk ditentukan dalam parameter fungsi atau nilai pulangan. 4) Prompt jenis yang boleh dibatalkan: membolehkan untuk memasukkan nilai null dan mengendalikan fungsi yang boleh mengembalikan nilai null.

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang laluByDDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang laluByDDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang laluByDDD

Penjimatan di R.E.P.O. Dijelaskan (dan simpan fail)

1 bulan yang laluBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - Cara Mencari Orang Panda

4 minggu yang laluByDDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.