<!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/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<canvas id="chart"></canvas>
</div>
<script>
new Vue({
el: '#app',
mounted: function() {
// 在页面加载完成后请求后端数据
axios.get('chart.php')
.then(function(response) {
// 处理返回的数据
var data = response.data;
// 处理数据并呈现图表
var labels = [];
var values = [];
for (var i = 0; i < data.length; i++) {
labels.push(data[i].date);
values.push(data[i].value);
}
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: '统计图表',
data: values,
}]
},
options: {}
});
})
.catch(function(error) {
console.log(error);
});
}
});
</script>
</body>
</html>
