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

Question

我在使用 Chart.js 时遇到了一些问题。我正在制作一个投票系统，我想动态更新该系统以供用户查看。有点像strawpoll 网站。当用户提交投票时，结果页面将自动更新为新的票数。我一直在寻找这个问题的答案，我觉得我已经成功了一半。我可以更新实际的图表，但它只是复制数据并永远持续下去。我希望它“替换”或只是更新数字和/或查看新的投票问题。

每秒复制一次的图表图片

这是我正在运行的代码：

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

问题是：这不起作用有什么原因吗？无论我如何尝试，我似乎都无法做到正确。任何帮助，将不胜感激！

Answer 1

该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.