使用Chart.js使用数据库中的数据实时更新图表

debugcn 发表于 Dev

杰斯珀

我在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>

问题是：是否有理由不起作用？无论尝试什么，我似乎都做不到。任何帮助，将不胜感激！

uminder

根据建议，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();
},