javascript-想在Django中使用chartjs绘制数据

我的应用程序将使用表格获取数据并将其保存到数据库中,然后使用chartjs进行绘制.
我已经尝试过此代码,但给我一个错误.我的代码如下：

def get_temperature_show(request):
all_temperatures = Temper.objects.all()

dates_label = []
sensor1_temp = []
sensor2_temp = []
sensor3_temp = []
sensor4_temp = []

for model in all_temperatures:
    dates_label.append(model.date)
    sensor1_temp.append(model.sensor1_temp)
    sensor2_temp.append(model.sensor2_temp)
    sensor3_temp.append(model.sensor3_temp)
    sensor4_temp.append(model.sensor4_temp)

data = {
    'dates': dates_label,
    'sensor1': sensor1_temp,
    'sensor2': sensor2_temp,
    'sensor3': sensor3_temp,
    'sensor4': sensor4_temp
}

return render(request, 'weather/showtemper.html', json.dumps({"data":data}))

但这给出了以下内容-

我的模板示例如下所示：

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
        datasets: [{
            label: 'apples',
            data: [12, 19, 3, 17, 6, 3, 7],
            backgroundColor: "rgba(153,255,51,0.4)"
        }, {
            label: 'oranges',
            data: [2, 29, 5, 5, 2, 3, 10],
            backgroundColor: "rgba(255,153,0,0.4)"
        }]
    }
});

请帮助我解决此错误

提前致谢

解决方法:

视图应该是这样的：

def get_temperature_show(request):

data = Temper.objects.all()
return render(request,'weather/showtemper.html',{'data':data})

在模板中只需迭代数据即可.代码如下：

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
    {#        labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],#}

    labels: [{% for d in data %} "{{ d.date }}", {% endfor %}],
    datasets: [{
        label: 'Sensor 1',
        {#            data: [12, 19, 3, 17, 6, 3, 7],#}
        data: [{% for temp in data %} "{{ temp.sensor1_temp }}", {% endfor %}],
        backgroundColor: "rgba(153,255,51,0.4)"
    }, {
        label: 'Sensor 2',
        data: [{% for temp in data %} "{{ temp.sensor2_temp }}", {% endfor %}],
        backgroundColor: "rgba(255,153,0,0.4)"
    },
        {
            label: 'Sensor 3',
            data: [{% for temp in data %} "{{ temp.sensor3_temp }}", {% endfor %}],
            backgroundColor: "rgba(0,0,255,0.4)"
        },
        {
            label: 'Sensor 4',
            data: [{% for temp in data %} "{{ temp.sensor4_temp }}", {% endfor %}],
            backgroundColor: "rgba(255,0,0,0.4)"
        }]
}
});

标签：chart-js,javascript,django
来源： https://codeday.me/bug/20191111/2019923.html