Can'；t使用Django将数据获取到我的Javascript函数中

您好，我试图获取图形，但我的buildDHTChart函数不起作用

这是我的观点

def sensor_main2(response):
    data={}
    sensors=Sensor.objects.all()
    for sensor in sensors:
        if 'DHT' in sensor.name:
            data[sensor.name]=pd.DataFrame({'humidity':Sensorreading.objects.filter(measured_value='humidity',name=sensor.name).values_list('value', flat=True)[:2],
                                           'temperature':Sensorreading.objects.filter(measured_value='temperature',name=sensor.name).values_list('value', flat=True)[:2]})
        elif 'ds18b20' in sensor.name:
            data[sensor.name]=pd.DataFrame({'temperature':Sensorreading.objects.filter(measured_value='temperature',name=sensor.name).values_list('value', flat=True)[:2]})
    time=Sensorreading.objects.order_by('time').reverse().filter(measured_value='temperature').values_list('time',flat=True)[:2]
    return render(response,"sensor/sensor_main2.html",{"data":data,"time:":time})

数据来自SQLite3数据库 我的模型如下所示：

class Sensor(models.Model):
    pi = models.CharField(max_length=30)
    name = models.CharField(max_length=30)
    type_field = models.CharField(max_length=30, db_column='type_')  # Field renamed because it ended with '_'.
    pin = models.IntegerField()
    location = models.CharField(max_length=30)
    id_field = models.CharField(max_length=30, db_column='id_')  # Field renamed because it ended with '_'.

    class Meta:
        managed = False
        db_table = 'sensor'
    
    def __str__(self):
        return self.name


class Sensorreading(models.Model):
    time = models.DateTimeField()
    name = models.CharField(max_length=30)
    location = models.CharField(max_length=30)
    measured_value = models.CharField(max_length=30)
    value = models.FloatField()

    class Meta:
        managed = False
        db_table = 'sensorreading'

    def __str__(self):
        return self.name

至少在我的html页面上，一开始我检查了我是否从我的数据库中获得了一些数据，然后数据就来了。但由于某种原因，它最终在我的工作中没有起作用

{% extends "main/base.html" %}

{% block title %}Daten der Sensoren{% endblock %}

{% block subtitle %}Daten der Sensoren{% endblock %}

{% block content %}
    <div class="jumbotron">
        <div class="container">
            <h1>Daten der Sensoren</h1>
            {{data}}
            <p>Hier sind ein paar Grafiken, die die Werte der Sensoren anzeigen asdf</p>

                {% for key, value in data.items %}
                    <p>{{key}}</p>
                    <p>{{value.temperature.values}}</p>
                    <p>{{value.humidity.values}}</p>
                    {% if "DHT" in key %}
                        <p> drin</p>
                    {% endif %}
                    {% if "ds18b20" in key %}
                        <p> drin</p>
                    {% endif %}
                {% endfor %}

            <p></p>
        </div>
    </div>
    <div class="container">
        <div class="row">
            {% for key, value in data.items %}
            <div class="col-md-6">
                <h2>{{key}}</h2>
                <canvas id='chart_{{ key }}' width='800' height='800'></canvas>
            </div>
            {% endfor %}        
        </div>
    </div>
    <script type="text/javascript" src="{{ STATIC_URL }} /static/jquery-3.5.1.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

    <script>
        function buildDHTChart(id,labels, humidity, temperature) {
            var ctx = $(id).get(0).getContext('2d');
            var dat = {
                labels: labels,
                datasets:[
                    {
                        label: "Temperature (Celsius)",
                        fillColor: "rgba(220,220,220,0.2)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: temperature
                    },
                    {
                        label: "Humidity (%)",
                        fillColor: "rgba(151,187,205,0.2)",
                        strokeColor: "rgba(151,187,205,1)",
                        pointColor: "rgba(151,187,205,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(151,187,205,1)",
                        data: humidity
                    }
                ]
            };
            var dhtChart = new Chart(ctx , {
                type:"line",
                data: dat,
            });
        }
        function buildds18b20Chart(id,labels,temperature) {
            var ctx = $(id).get(0).getContext('2d');
            var dat = {
                labels: labels,
                datasets:[
                    {
                        label: "Temperature (Celsius)",
                        fillColor: "rgba(220,220,220,0.2)",
                        strokeColor: "rgba(220,220,220,1)",
                        pointColor: "rgba(220,220,220,1)",
                        pointStrokeColor: "#fff",
                        pointHighlightFill: "#fff",
                        pointHighlightStroke: "rgba(220,220,220,1)",
                        data: temperature
                    },
                ]
            };
            var ds18b20Chart = new Chart(ctx , {
                type:"line",
                data: dat,
            });
        }
        
        $(document).ready(function() {
            {% for key, value in data.itmes %}
                {% if "DHT" in key %}
                    buildDHTChart('#chart_{{ key }}',
                          [{{ time|join:"\",\""}}],
                          [{{ value.humidity.values|join:"," }}],
                          [{{ value.temperature.values|join:"," }}]);
                {% elif "ds18b20" in key %}
                    buildds18b20Chart('#chart_{{ key }}',
                          ["{{ time|join:"\",\""}}"],
                          [{{ value.temperature.values|join:"," }}]);
                {% endif %}

            {% endfor %}
        });
    </script>
{% endblock %}

{%extends“main/base.html”%}
{%block title%}传感器数据{%endblock%}
{%block subtitle%}传感器数据{%endblock%}
{%block content%}
传感器数据
{{data}}
在格拉菲肯先生的陪同下，我们安装了传感器和asdf

{%表示键，值位于data.items%}
{{key}}

{{value.temperature.values}}

{{value.湿度.values}

{%if键%中的“DHT”}
德林

{%endif%}
{%if键%中的“ds18b20”}
德林

{%endif%}
{%endfor%}

{%表示键，值位于data.items%}
{{key}}
{%endfor%}
功能构建DHTChart（id、标签、湿度、温度）{
var ctx=$（id）.get（0）.getContext（'2d'）；
var dat={
标签：标签，
数据集：[
{
标签：“温度（摄氏度）”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：温度
},
{
标签：“湿度（%）”，
填充颜色：“rgba（151187205,0.2）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（151187205,1）”，
数据：湿度
}
]
};
var dhtChart=新图表（ctx{
键入：“行”，
数据：dat，
});
}
功能构建DS18B20CHART（id、标签、温度）{
var ctx=$（id）.get（0）.getContext（'2d'）；
var dat={
标签：标签，
数据集：[
{
标签：“温度（摄氏度）”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：温度
},
]
};
var ds18b20Chart=新图表（ctx{
键入：“行”，
数据：dat，
});
}
$（文档）.ready（函数（）{
{%表示键，值位于data.itmes%}
{%if键%中的“DHT”}
buildDHTChart（'#图表{{{key}}}'，
[{{time}加入：“\”，\”}，
[{value.湿度.values|join:“，”}}]，
[{value.temperature.values|join:，“}}]）；
{%elif“ds18b20”在键%}
buildds18b20Chart（“#图表{{{key}}}”，
[“{time}加入：\”，\“}}”，
[{value.temperature.values|join:，“}}]）；
{%endif%}
{%endfor%}
});
{%endblock%}

---

我尝试了使用订单数据的函数，结果成功了。

您好，您的javascript代码中有一个拼写错误

{%为键，数据中的值。itmes%}必须为 {%表示键，值位于data.items%}

$(document).ready(function() {
    {% for key, value in data.items %}
        {% if "DHT" in key %}
            buildDHTChart('#chart_{{ key }}',
                  [{{ time|join:"\",\""}}],
                  [{{ value.humidity.values|join:"," }}],
                  [{{ value.temperature.values|join:"," }}]);
        {% elif "ds18b20" in key %}
            buildds18b20Chart('#chart_{{ key }}',
                  ["{{ time|join:"\",\""}}"],
                  [{{ value.temperature.values|join:"," }}]);
        {% endif %}

    {% endfor %}
});

---

谢谢你，这是拼写错误