Django绘制折线图的最佳方式

时间:2018-04-05 10:33:11

标签: html django charts linechart

我有两个模型:用户和数据。每个用户都有多个数据,一个数据属于用户。

所以我有以下代码:

class User(models.Model):
    id = models.CharField(max_length=10, primary_key=True)

    def __str__(self):
        return self.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)

    def __str__(self):
        return 'User : ' + self.user.id + ' | Time : '+ str(self.timestamp)

在我的网络应用程序中,我有一个显示所有用户的登录页面。点击一个用户后,它会显示另一个空白页面。我想绘制一个折线图,显示该页面上用户的x,y,z加速度。

这样做的最佳方式是什么?

2 个答案:

答案 0 :(得分:2)

您可以在HTML模板上使用Chart.js或Google图表,并且需要为Django视图中的图表生成Json。

from django.core.serializers import serialize

data = Data.objects.filter(user=user)
json_data = serialize('json', data, cls=LazyEncoder)

答案 1 :(得分:1)

您可以像文档中所述的那样使用django-nvd3 ......

from django.shortcuts import render_to_response
import random
import datetime
import time

def demo_linechart(request):
    """
    lineChart page
    """
    start_time = int(time.mktime(datetime.datetime(2012, 6, 1).timetuple()) * 1000)
    nb_element = 100
    xdata = range(nb_element)
    xdata = map(lambda x: start_time + x * 1000000000, xdata)
    ydata = [i + random.randint(1, 10) for i in range(nb_element)]
    ydata2 = map(lambda x: x * 2, ydata)

    tooltip_date = "%d %b %Y %H:%M:%S %p"
    extra_serie = {"tooltip": {"y_start": "", "y_end": " cal"},
                   "date_format": tooltip_date}
    chartdata = {'x': xdata,
                 'name1': 'series 1', 'y1': ydata, 'extra1': extra_serie,
                 'name2': 'series 2', 'y2': ydata2, 'extra2': extra_serie}
    charttype = "lineChart"
    data = {
        'charttype': charttype,
        'chartdata': chartdata
    }
    return render_to_response('linechart.html', data)

模板示例:

{% load static %}
<link media="all" href="{% static 'nvd3/src/nv.d3.css' %}" type="text/css" rel="stylesheet" />
<script type="text/javascript" src='{% static 'd3/d3.min.js' %}'></script>
<script type="text/javascript" src='{% static 'nvd3/nv.d3.min.js' %}'></script>

{% load nvd3_tags %}
<head>
    {% load_chart charttype chartdata "linechart_container" True "%d %b %Y %H" %}
</head>
<body>
    {% include_container "linechart_container" 400 600 %}
</body>

但我认为使用django-rest-framework在后端创建api的最好方法是

然后

使用任何前端框架(如angularjs

)来使用api的数据

并且在前端框架中有几个第三方开源项目可以帮助您实现任何类型的图表