Bagaimana untuk melaksanakan fungsi visualisasi data mudah menggunakan MySQL dan JavaScript-tutorial mysql-php.cn

Bagaimana untuk melaksanakan fungsi visualisasi data mudah menggunakan MySQL dan JavaScript

WBOY

Lepaskan： 2023-09-20 15:49:52

asal

723 orang telah melayarinya

Bagaimana untuk melaksanakan fungsi visualisasi data mudah menggunakan MySQL dan JavaScript

Cara menggunakan MySQL dan JavaScript untuk melaksanakan fungsi visualisasi data yang mudah

Pengenalan:
Visualisasi data menduduki kedudukan penting dalam era maklumat moden, yang boleh memaparkan data secara visual, menganalisis data dan membantu kami membuat keputusan yang lebih bijak . Artikel ini akan memperkenalkan cara menggunakan MySQL dan JavaScript untuk melaksanakan fungsi visualisasi data yang mudah, sambil memberikan contoh kod khusus.

1. Penyediaan:
Sebelum kita mula, kita perlu menyediakan persekitaran kerja berikut:

Pasang pangkalan data MySQL dan cipta pangkalan data dan jadual data untuk menyimpan data yang perlu divisualisasikan.
Tulis antara muka bahagian belakang yang ringkas untuk mendapatkan data daripada pangkalan data dan mengembalikannya ke bahagian hadapan dalam format JSON.

2. Bahagian hadapan:

Struktur HTML:

<!DOCTYPE html>
<html>
<head>
  <title>数据可视化</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- 引入chart.js库 -->
</head>
<body>
  <canvas id="myChart"></canvas> <!-- 创建一个canvas元素，用于展示图表 -->
</body>
</html>

Salin selepas log masuk

Kod JavaScript:

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'bar', // 图表类型，这里使用柱状图
  data: {
 labels: [], // 图表的标签
 datasets: [{
   label: '数据可视化', // 数据集的标签
   backgroundColor: 'rgba(75, 192, 192, 0.2)', // 柱状图的颜色
   borderColor: 'rgba(75, 192, 192, 1)', // 柱状图边框的颜色
   borderWidth: 1, // 柱状图边框的宽度
   data: [] // 图表的数据
 }]
  },
  options: {
 scales: {
   y: {
     beginAtZero: true // Y轴从0开始
   }
 }
  }
});

// 使用fetch函数从后端接口获取数据，并更新图表
fetch('/api/get_data')
  .then(function(response) {
 return response.json();
  })
  .then(function(data) {
 chart.data.labels = data.labels;
 chart.data.datasets[0].data = data.values;
 chart.update();
  });

Salin selepas log masuk

3. Bahagian belakang PH: 🜎

Ganti fungsi pengambilan bahagian hadapan URL ialah alamat antara muka bahagian belakang anda, contohnya:

<?php
$db_host = 'localhost'; // 数据库主机名
$db_name = 'test'; // 数据库名
$db_user = 'root'; // 数据库用户名
$db_pwd = 'password'; // 数据库密码

// 连接MySQL数据库
$conn = mysqli_connect($db_host, $db_user, $db_pwd, $db_name);

// 获取需要可视化的数据
$query = 'SELECT * FROM data_table';
$result = mysqli_query($conn, $query);

$labels = [];
$values = [];

while($row = mysqli_fetch_array($result)) {
  $labels[] = $row['label'];
  $values[] = $row['value'];
}

$data = [
  'labels' => $labels,
  'values' => $values
];

// 将数据以JSON格式返回给前端
header('Content-Type: application/json');
echo json_encode($data);
?>

Salin selepas log masuk

Ringkasan:
Dalam artikel ini, kami memperkenalkan cara menggunakan MySQL dan JavaScript untuk melaksanakan fungsi visualisasi data yang mudah. Dengan menggunakan perpustakaan chart.js di bahagian hadapan untuk mencipta carta dan menggunakan PHP di bahagian belakang untuk mendapatkan data daripada pangkalan data, kami boleh melaksanakan halaman visualisasi data yang mudah. Pembaca boleh terus membangun dan mengoptimumkan mengikut keperluan mereka sendiri untuk memenuhi keperluan aplikasi praktikal. Semoga artikel ini bermanfaat kepada semua orang!

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi visualisasi data mudah menggunakan MySQL dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!