Cipta carta visualisasi data menggunakan PHP dan FusionCharts-tutorial php-php.cn

Cipta carta visualisasi data menggunakan PHP dan FusionCharts

PHPz

Lepaskan： 2023-05-11 11:42:01

asal

917 orang telah melayarinya

Apabila perniagaan moden menjadi semakin digital, pemprosesan data dan visualisasi semakin penting. Banyak syarikat bergantung pada visualisasi data untuk memahami perniagaan mereka dan membuat keputusan strategik. Dalam artikel ini, kita akan membincangkan cara membuat carta visualisasi data menggunakan PHP dan FusionCharts.

FusionCharts ialah satu set perpustakaan JavaScript untuk mencipta carta interaktif yang cantik, dinamik dan interaktif. Ia menyokong banyak jenis carta, termasuk carta linear, carta pai, carta bar, carta serakan dan banyak lagi. FusionCharts menyediakan banyak ciri, seperti kemas kini dinamik dan tindak balas masa nyata, untuk membantu pengguna memahami data dengan lebih baik.

Dalam contoh artikel ini, kami akan mencipta carta bar ringkas untuk memaparkan data jualan syarikat A, B, C dan D. Kami akan menggunakan PHP untuk menjana data carta dan kemudian menggunakan FusionCharts untuk menggambarkannya.

Sebelum bermula, kami perlu memasang perpustakaan PHP dan FusionCharts dan menyediakan data kami. Kita boleh mencipta fail PHP yang dipanggil data.php untuk menjana data kita. Dalam fail ini, kami akan mencipta tatasusunan untuk menyimpan data jualan.

<?php
$sales = array(
    array("name" => "Company A", "sales" => 25000),
    array("name" => "Company B", "sales" => 35000),
    array("name" => "Company C", "sales" => 45000),
    array("name" => "Company D", "sales" => 55000)
);
echo json_encode($sales);
?>

Salin selepas log masuk

Dalam contoh ini, kami mencipta tatasusunan yang dipanggil $sales, yang mengandungi 4 tatasusunan, setiap tatasusunan mewakili syarikat dan jualannya. Kami menggunakan fungsi json_encode() untuk menukar data ke dalam format JSON untuk digunakan dalam JavaScript.

Seterusnya, kita perlu menyediakan halaman HTML untuk membentangkan carta. Kami boleh mencipta fail yang dipanggil index.html dan memasukkan pustaka FusionCharts dan kod JavaScript kami di dalamnya. Kami juga perlu mencipta elemen div kosong dalam halaman ini supaya carta kami boleh ditarik ke dalamnya.

<!DOCTYPE html>
<html>

<head>
  <title>FusionCharts Example</title>
  <script src="fusioncharts.js"></script>
</head>

<body>
  <div id="chart-container"></div>

  <script>
    FusionCharts.ready(function() {
      var salesChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '100%',
        height: '500',
        dataFormat: 'json',
        dataSource: {
          "chart": {
            "caption": "Sales Data",
            "xAxisName": "Company",
            "yAxisName": "Sales",
            "theme": "fusion"
          },
          "data": []
        }
      });

      var dataSource = {
        "chart": {},
        "data": []
      };

      // AJAX request to get the data from data.php
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          dataSource.data = JSON.parse(this.responseText);

          salesChart.setChartData(dataSource);
        }
      };
      xhttp.open("GET", "data.php", true);
      xhttp.send();
    });
  </script>
</body>

</html>

Salin selepas log masuk

Dalam contoh ini, kami mencipta objek FusionCharts yang dipanggil salesChart dan menetapkan jenis carta kepada column2d (carta lajur). Kami juga menetapkan nama dan tema lebar, ketinggian, paksi x dan y carta. Kami juga mencipta objek JavaScript yang dipanggil dataSource yang mengandungi data jualan yang kami peroleh daripada data.php.

Dalam kod JavaScript kami, kami menggunakan objek XMLHttpRequest untuk membuat permintaan HTTP GET untuk mendapatkan data daripada data.php. Setelah kami mempunyai data, kami menetapkan data kepada sifat data objek dataSource dan menggunakan kaedah setChartData() untuk menggunakan data pada carta kami.

Sekarang, jika kita membuka fail index.html dalam penyemak imbas, kita akan melihat carta bar yang bagus menunjukkan data jualan untuk syarikat A, B, C dan D.

Untuk meringkaskan, kami telah mempelajari cara membuat carta visualisasi data menggunakan PHP dan pustaka FusionCharts. Dengan memikirkan cara menggunakan alatan ini untuk mencipta carta interaktif yang cantik, kami dapat memahami data kami dengan lebih baik dan membuat keputusan yang lebih baik.

Atas ialah kandungan terperinci Cipta carta visualisasi data menggunakan PHP dan FusionCharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!