PHP 및 Vue.js에서 시각적 경제지표 통계차트 구현 방법
빅데이터 및 데이터 분석의 발전으로 시각적 경제지표 통계차트에 대한 관심이 더욱 높아지고 있습니다. 웹 개발에서 백엔드 언어인 PHP와 프런트엔드 프레임워크인 Vue.js는 이러한 목표를 달성하는 데 사용할 수 있는 강력한 조합을 제공합니다. 이 기사에서는 코드 예제와 함께 PHP 및 Vue.js를 사용하여 경제 지표의 시각적 통계 차트를 만드는 방법을 소개합니다.
<?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(); ?>
<!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>
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); }); } } });
요약
이 기사에서는 PHP와 Vue.js를 사용하여 경제 지표의 시각적 통계 차트를 만드는 방법을 배웠습니다. 우리는 PHP를 통해 데이터를 얻기 위해 데이터베이스를 쿼리하고 Vue.js 및 Chart.js를 사용하여 통계 차트를 생성하는 방법을 시연했습니다. 이러한 기술을 이용하면 경제지표의 시각적 통계 기능을 쉽게 구현할 수 있습니다. 이 기사가 도움이 되기를 바랍니다!
위 내용은 PHP 및 Vue.js에서 시각적 경제 지표 통계 차트를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!