代码之家 › 专栏 › 技术社区 › Lechucico

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

linechart chart.js django

Lechucico · 技术社区 · 6 年前

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

这是视图:

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

此user\u 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 %}

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

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

我怎样才能做到这一点 chart.js

我需要以下内容:

1 回复 | 直到 6 年前

HenryM 6 年前

您需要将数据传递到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)

然后您需要在模板中进行渲染(这不太正确,但我相信您可以从这里进行计算)

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

推荐文章

NorthSide · dc。js折线图-填写缺失的日期并在没有数据的情况下显示零

6 年前

user4129291 · 堆叠折线图不工作的单击事件

6 年前

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

6 年前

G.Price · 使用Apache POI组合条形图和折线图

6 年前

yer · 重复x轴Morris上的值。js折线图

7 年前

Eshan · d3中未出现行。js折线图(仅轴可见)

7 年前

Sajal Roychowdhury · 在melt数据框中设置变量列

7 年前

user6195239 · 如何使用从csv文件过滤的数据创建多系列折线图?

7 年前

Durga · 使用折线图d3中的下拉菜单重新缩放x轴

7 年前

user46543 · 用python绘制多条线[重复]

7 年前