如何解决使用Chart.js使用数据库中的数据实时更新图表
我在使用Chart.js时遇到了麻烦。我正在制作一个要动态更新的投票系统,以供用户查看。有点像草编网站。当用户提交投票时,结果页面将自动更新为新的投票计数。我一直在寻找答案,感觉好像已经中途了。我可以获取实际的图表进行更新,但它只是复制数据并一直持续下去。我希望它“替换”或只是更新数字和/或查看新的投票问题。
这是我正在运行的代码:
<div id="chart-container">
<canvas id="dataChart"></canvas>
</div>
<script>
var ctx = $("#dataChart");
var dataChart = new Chart(ctx,{
type: 'bar',data: {
labels: [],datasets: [{
label: '<?php echo($row['vote_name']) ?>',backgroundColor: '#49e2ff',borderColor: '#46d5f1',hoverBackgroundColor: '#CCCCCC',hoverBorderColor: '#666666',data: [],}]
},options: {}
});
var updateChart = function() {
$('#dataChart').html('');
$('#dataChart').html('<canvas id="dataChart"></canvas>');
$.ajax({
url: "data.php?form=<?php echo($vote_id) ?>",type: "GET",dataType: "json",success: function(data) {
console.log(data);
var name = [];
var marks = [];
for (var i in data) {
dataChart.data.labels.push(data[i].question);
dataChart.data.datasets[0].data.push(data[i].vote_count);
}
dataChart.update();
},error: function(data) {
console.log(data);
}
});
}
updateChart();
setInterval(() => {
updateChart();
},1000);
</script>
问题是:是否有理由不起作用?无论尝试什么,我似乎都做不到。 任何帮助将不胜感激!
解决方法
根据建议,Tushar,他的评论中,success
函数可以进行如下更改:
success: function(data) {
dataChart.data.labels = data.map(v => v.question);
dataChart.data.datasets[0].data = data.map(v => v.vote_count);
dataChart.update();
},
此解决方案使用
Array.map()
方法创建一个新的array
,其中填充了在array
中每个元素上调用提供的函数的结果。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。