如何通过使用Django中的sqlite从图表(使用随机数创建)中获取数据来更新数据库,并将该随机数存储到数据库中

时间:2018-12-03 11:19:08

标签: html django chart.js

我想知道如何通过从温度和湿度图表的随机值中获取数据来更新数据库,并且该值将自动更新并存储具有时间跨度的数据库。

view.py

from django.contrib.auth import get_user_model
from django.http import JsonResponse
from django.shortcuts import render
from django.views.generic import View

from .models import *
import random


from rest_framework.views import APIView
from rest_framework.response import Response

User=get_user_model()


class HomeView(View):
   def get(self,request,*args,**kwargs):
       return render(request,'charts.html',{})



def get_data(request,*args,**kwargs):
   data={

   }
   return JsonResponse(data)


class ChartData(APIView):
   authentication_classes = []
   permission_classes = []

   def get(self, request, format=None):
       qs_count=User.objects.all().count()
       labels=["0", "2", "4", "6", "8", "10","12","14","16","18"]
       default_items=[]
       for items in range(10):
           t=random.randint(0,50)
           default_items=default_items+[t]
       data={
       "labels":labels,
       "default":default_items,
       }
       return Response(data)``

chart.html

<meta http-equiv="refresh" content="2">

{% extends 'base.html' %}

<script type="text/javascript">
   {% block jquery %}
   var endpoint='/api/chart/data/' //{% url "api-data" %}
   var defaultData=[]
   var labels=[]
   $.ajax({
       method:'GET',
       url:endpoint,
       success:function(data) {
           labels=data.labels
           defaultData=data.default
           setChart()
       },
       error:function(error_data){
           console.log(error)
           console.log(error_data)
      }
   })

   function setChart(){
   var ctx = document.getElementById("Temp");
   var ctx2 = document.getElementById("Hmdt");
   var Hmdt = new Chart(ctx2, {
               type: 'bar',
                data: {
                   labels: labels ,
                   datasets: [{
                       label: 'Max Humidity',
                       data: defaultData,
                       backgroundColor: [
                           'rgba(255, 99, 132, 0.2)',
                           'rgba(54, 162, 235, 0.2)',
                           'rgba(255, 206, 86, 0.2)',
                           'rgba(75, 192, 192, 0.2)',
                           'rgba(153, 102, 255, 0.2)',
                           'rgba(255, 159, 64, 0.2)'
                       ],
                       borderColor: [
                           'rgba(255,99,132,1)',
                           'rgba(54, 162, 235, 1)',
                           'rgba(255, 206, 86, 1)',
                           'rgba(75, 192, 192, 1)',
                           'rgba(153, 102, 255, 1)',
                           'rgba(255, 159, 64, 1)'
                       ],
                       borderWidth: 2
                   }]
               },
               options: {
                   scales: {
                       yAxes: [{
                          ticks: {
                               beginAtZero:true
                           }
                       }]
                   }
             }
           });
           var Temp = new Chart(ctx, {
               type: 'line',
               data: {
                   labels: labels ,
                   datasets: [{
                       label: 'Max Temperature',
                       data: defaultData,
                       backgroundColor: [
                           'rgba(255, 99, 132, 0.2)',
                           'rgba(54, 162, 235, 0.2)',
                           'rgba(255, 206, 86, 0.2)',
                           'rgba(75, 192, 192, 0.2)',
                           'rgba(153, 102, 255, 0.2)',
                           'rgba(255, 159, 64, 0.2)'
                       ],
                       borderColor: [
                           'rgba(255,99,132,1)',
                           'rgba(54, 162, 235, 1)',
                           'rgba(255, 206, 86, 1)',
                           'rgba(75, 192, 192, 1)',
                           'rgba(153, 102, 255, 1)',
                           'rgba(255, 159, 64, 1)'
                       ],
                       borderWidth: 2
                   }]
               },
               options: {
                   scales: {
                       yAxes: [{
                          ticks: {
                               beginAtZero:true
                           }
                       }]
                   }
             }
           });
       }
   {% endblock %}
</script>
{% block content %}

<div class="row">
   <div class="col-sm-12" url-endpoint='{% url "api-data" %}'>
       <h1>This is my charts</h1>
       <p id="i2"></p>
       <div class="col-sm-6">
           <h1 style="text-align: center;">Temperature</h1>
           <canvas id="Temp" width="100" height="100"></canvas> 
       </div>
       <div class="col-sm-6">
       <h1 style="text-align: center;">Humidity</h1>
           <canvas id="Hmdt" width="100" height="100"></canvas>
       </div>
   </div>
</div>
{% endblock content %}

我想知道如何通过从温度和湿度图表的随机值中获取数据来更新数据库,并且该值将自动更新并存储具有时间跨度的数据库。

0 个答案:

没有答案