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

Question

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

这是观点：

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

这个user_id，是模型User的主键。该用户有多个 'Data'。数据模型如下：

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

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

Create Line Chart and populate with database information

django

linechart

chart.js