Django 创建折线图并填充数据库信息_Django_Chart.js_Linechart

Django 创建折线图并填充数据库信息

django chart.js

Django 创建折线图并填充数据库信息,django,chart.js,linechart,Django,Chart.js,Linechart,我想在我的html上创建一个折线图，并且信息必须来自数据库这是一种观点： def data(request, id): return render(request, 'interface/data.html', {'user_id': id}) 此用户id是模型用户的主键。此用户有多个“数据”。数据模型如下所示： class Data(models.Model): user = models.ForeignKey(User, on_delete=models.CASCADE)

我想在我的html上创建一个折线图，并且信息必须来自数据库

这是一种观点：

def data(request, id):
    return render(request, 'interface/data.html', {'user_id': id})

此用户id是模型用户的主键。此用户有多个“数据”。数据模型如下所示：

class Data(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    timestamp = models.IntegerField(default=0)
    x = models.IntegerField(default=0)
    y = models.IntegerField(default=0)
    z = models.IntegerField(default=0)

这是html：

{% extends './default.html' %}
{% block child_content %}

<body>
    <h2 class="square_margin" style="text-align:center"> Información paciente: <strong> {{ user_id }} </strong> </h2>

    <!-- HERE GOES THE LINE CHART -->

    <form class="square square_margin"> <button class="btn btn-warning btn-md btn-block" formaction="{% url 'interface:modify' user_id %}"> Modificar Ajustes Paciente </button></form>
</body>

{% endblock %}

{%extends./default.html%}
{%block child_content%}
太平洋信息：{{user_id}
改良的帕西恩特酒店
{%endblock%}

我想用该用户的数据信息填充该折线图

在X轴上是时间（数据有时间戳）。Y轴是加速度，由数据模型中的x，Y，z表示

我怎么能这样做呢

我需要像下面这样的东西：

class Data(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    timestamp = models.IntegerField(default=0)
    x = models.IntegerField(default=0)
    y = models.IntegerField(default=0)
    z = models.IntegerField(default=0)

您需要将数据传递到web模板。比如：

def data(request, id):
    variables = {}
    variables['line1'] = [1, 2, 3, 4]
    variables['line2'] = [4, 3, 2, 1]
    variables['line3'] = [1, 3, 5, 7]
    variables['user_id'] = id
    return render(request, 'interface/data.html', variables)

然后您需要在模板中进行渲染（这不太正确，但我相信您可以从这里解决）


var myChart=新图表（ctx{
键入：“行”，
数据：数据，
选项：选项
});
风险值数据=[
数据集：[{
数据：{{line1}}，
},{
数据：{line2}}，
},{
数据：{{line3}}
}