Question

我想在html上创建折线图，信息必须来自数据库。

这是观点：

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

此user_id是模型User的主键。此用户拥有多个“数据”。数据模型如下：

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 %}

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

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

我如何使用chart.js

执行此操作

我需要以下内容：

Answer 1

您需要将数据传递到网络模板。类似的东西：

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)

然后你需要在模板中渲染（这不太对，但我相信你可以从这里开始工作）

<div id="mychart"></div>
<script src="path/to/chartjs/dist/Chart.js"></script>
<script>
var myChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});
var data = [
datasets: [{
  data: {{line1}},
},{
  data: {{line2}},
},{
  data: {{line3}}
}

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

1 个答案: