定期刷新 Django 模板中的占位符和画布标签答案

【问题标题】：Periodically refresh placeholder and canvas tag in Django template定期刷新 Django 模板中的占位符和画布标签
【发布时间】：2019-12-01 13:09:25
【问题描述】：

我有一个模板，除其他外，它通过占位符显示当前市场价格，即{{ market.current_price }}，以及使用ChartJS 的随附价格图表，在模板中以画布标签<canvas id="myChart"></canvas> 呈现.

我的问题：由于市场价格会随着不同用户与基础市场的互动而变化，是否有一种简单的方法可以定期（例如，每 10 秒）刷新占位符和图表模板，以确保每个用户都在查看最新的价格/图表？

如果可能的话，我会尽量避免刷新整个页面。

如果有什么不同，通过Ajax渲染图表，如下：

{% block jquery %}
            var endpoint = "{% url 'chart_data' market.id %}"
            var defaultData = []
            var labels = []
            $.ajax({
                method: "GET",
                url: endpoint,
                success: function(data){
                    defaultData = data.prices
                    price_array_length = defaultData.length + 1
                    labels = data.price_dates
                    var ctx = document.getElementById('myChart').getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: labels,
                            datasets : [{
                                label: 'Market price',
                                data: defaultData,
                                backgroundColor: [
                                    'rgba(54, 162, 235, 0.2)',
                                ],
                                borderColor: [
                                    'rgba(54, 162, 235, 1)',
                                ],
                                borderWidth: 2
                            }]
                        },
                        options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        suggestedMin: 0,
                                        suggestedMax: 1
                                    }
                                }]
                            },
                            animation: {
                                duration: 500 // general animation time
                            },
                            hover: {
                                animationDuration: 500 // duration of animations when hovering an item
                            },
                            responsiveAnimationDuration: 500 // animation duration after a resize
                        }
                    })
                }
            })
{% endblock %}

非常感谢您的任何建议！

【问题讨论】：

我没有过多地使用 ChartJS，但是如果你想更新一个图表，我相信你必须有一个函数来接收图表并调用chart.update()。我想你可以 setInterval() 在任何时间请求新数据并在你对数据做你需要的事情后调用 chart.update()

标签： javascript html django chart.js

【解决方案1】：

这是一个解决方案：在@MichaelCacciano 的建议的基础上，我将 JQuery 包装在一个函数中 (refresh_graph)，并且还删除了 Django 占位符以支持标签 (currentPrice)，这两个标签现在都每秒更新一次，如下：

<script>
    function refresh_graph() {
        {% block jquery %}
            var endpoint = "{% url 'chart_data' market.id %}"
            var defaultData = []
            var labels = []
            $.ajax({
                method: "GET",
                url: endpoint,
                success: function(data){
                    defaultData = data.prices
                    price_array_length = defaultData.length + 1
                    labels = data.price_dates
                    var current = defaultData[defaultData.length-1];
                    document.getElementById('currentPrice').innerHTML = current;
                    var ctx = document.getElementById('myChart').getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: labels,
                            datasets : [{
                                label: 'Market price',
                                data: defaultData,
                                backgroundColor: [
                                    'rgba(54, 162, 235, 0.2)',
                                ],
                                borderColor: [
                                    'rgba(54, 162, 235, 1)',
                                ],
                                borderWidth: 2
                            }]
                        },
                        options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        suggestedMin: 0,
                                        suggestedMax: 1
                                    }
                                }]
                            },
                            animation: {
                                duration: 0 // general animation time
                            },
                            hover: {
                                animationDuration: 0 // duration of animations when hovering an item
                            },
                            responsiveAnimationDuration: 500 // animation duration after a resize
                        }
                    })
                }
            })
        setTimeout(refresh_graph, 1000);
        }
        setTimeout(refresh_graph, 0);
    {% endblock %}
</script>

【讨论】：