Python 如何使用Django和Chart.js创建动态图表？_Python_Django_Chart.js

Python 如何使用Django和Chart.js创建动态图表？

python django chart.js

Python 如何使用Django和Chart.js创建动态图表？,python,django,chart.js,Python,Django,Chart.js,我正在创建一个网页，并希望包括一个图表，显示温度随时间的变化温度数据每秒钟保存在数据库中。Django检索此数据并将其传递给模板 Django： def Dashboard(request): temp = Info.objects.using('wings').filter(localisation ='Wing_1').order_by('-time') time1 = [] temperature = [] for dataset in temp :

我正在创建一个网页，并希望包括一个图表，显示温度随时间的变化

温度数据每秒钟保存在数据库中。Django检索此数据并将其传递给模板

Django：

def Dashboard(request):

    temp = Info.objects.using('wings').filter(localisation ='Wing_1').order_by('-time')

    time1 = []
    temperature = []

    for dataset in temp :
        time1.append(dataset.time.strftime("%Hh%M"))
        temperature.append(dataset.temp_wing)

    time1 = time1[:60]
    temperature = temperature[:60]
    time1.reverse()
    temperature.reverse()

    context = {
                'time1': time1,
                'temperature': temperature,
    }
    return render(request, 'Dashboard/dashboard.html',context)

模板：

<!DOCTYPE html>
{% load static %}

<canvas id="myChart" width="400" height="200"></canvas>

<script src="{% static 'Dashboard/js/Chart.min.js' %}"></script>

<script>
var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: {{time1|safe}},
        datasets: [
        {label: 'Wing 1 temperature', data : {{temperature|safe}}, backgroundColor:['rgba(54, 162, 235, 0.2)'], borderColor: ['rgba(54, 162, 235, 1)'], borderWidth: 1}
        ]},
    options: {
        scales: { yAxes: [{ ticks: { beginAtZero: false }}]}
        }
    });

ChartUpdate(function(){
  myChart.data.datasets[0].data = {{temperature|safe}};
  myChart.data.labels = {{time1|safe}};
  myChart.update();
}, 5000);

</script>


{%load static%}
var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：{time1 | safe}}，
数据集：[
{标签：'Wing 1 temperature'，数据：{temperature | safe}}，背景色：['rgba（54162235，0.2）”，边框颜色：['rgba（54162235，1）”，边框宽度：1}
]},
选项：{
刻度：{yAxes:[{ticks:{beginAtZero:false}}]}
}
});
图表更新（函数（）{
myChart.data.datasets[0].data={{temperature | safe}；
myChart.data.labels={{time1 | safe}；
myChart.update（）；
}, 5000);

使用数据库的值正确呈现图表。但我曾期望模板中的

ChartUpdate

函数会自动使用新保存在数据库中的值更新图形，但它似乎不起作用

有没有一种方法可以在不重新加载页面的情况下用数据库的新值自动更新图表的值？

多亏了drec4s的评论，我才能够解决我的问题

此处显示查看文件：

def AutoUpdate(request):

    temp = Info.objects.using('wings').filter(localisation ='Wing_1').order_by('-time')

    time1 = []
    temperature = []

    for dataset in temp :
        time1.append(dataset.time.strftime("%Hh%M"))
        temperature.append(dataset.temp_wing)

    time1 = time1[:60]
    temperature = temperature[:60]
    time1.reverse()
    temperature.reverse()

    context = {
                'time1': time1,
                'temperature': temperature,
    }
    return JsonResponse(context)

以及模板中的脚本部分：

setInterval(function(){
    $.ajax({
        url:'/Dashboard/AutoUpdate',
        success: function(test){
            myChart.data.datasets[0].data = test.temperature;
            myChart.data.labels = test.time1;
            myChart.update();
        }
    });
}, 5000);

如果要从数据库中获取新数据，则需要在

ChartUpdate

函数中进行

ajax

调用。您可能需要实现一个新的API端点。问得好，回答得好。事实上，要实现实时更新，您需要

setInterval

和

$.ajax（）