统计插件,Highcharts,以及modelformset

一.modelfromset组件

1.作用:用于批量处理多个表单

form表单对应的组件是formset

Modelform对应的组件是modelformset

2.引入

From django.forms.models import modelformset_factory

3.参数(没有默认值的)

Model=Studengstudyrecord      #对应的模型表

form=Studengstudyrecordmodelform           #模型表对应的modelform

Extra=0   #创建几个添加的表单,不用就的美好与0

4.代码:model_formset_cls=modelformset_factory(model=StudentStudyRecord,form=StudentStudyRecordModelForm,extra=0)

5.获取取queryset

queryset = StudentStudyRecord.objects.filter(classstudyrecord=class_study_record_id)

6.构建model formset

formset = model_formset_cls(queryset=queryset)

7.前端页面

 return render(request,"record_score.html",locals())

 <form method="post" action="">
     {% csrf_token %}
     {{ formset.management_form }}
 #一定要在form表单中添加{{ formset.management_form }}
     <table class="table table-bordered">
         <thead>
         <tr>
             <th>姓名</th>
             <th>考勤</th>
             <th>作业成绩</th>
             <th>作业评语</th>
         </tr>
         </thead>
         <tbody>
         {% for form in formset %}  #每一个学生记录对象
             <tr>
                 {{ form.id }}
                 <td>{{ form.instance.student }}</td>  #对某一个字段,不渲染select标签
                 <td>{{ form.instance.get_record_display }} </td>
                 <td>{{ form.score }} </td>
                 <td>{{ form.homework_note }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
     <input type="submit" value="保存">
 </form>

8.提交之后的处理

 def post(self, request,class_study_record_id):
     model_formset_cls = modelformset_factory(model=StudentStudyRecord, form=StudentStudyRecordModelForm, extra=0)
     queryset = StudentStudyRecord.objects.filter(classstudyrecord=class_study_record_id)
     print("request.POST",request.POST)
     formset=model_formset_cls(request.POST)
     if formset.is_valid():
         formset.save()

     print(formset.errors)

     return redirect(request.path)

二. 销售额知识点

1.request.GET.get(“date”,today)

获取date,如果date取不到用today

2.datetime模块

Datetime.datetime 以年月日时分秒的格式获取时间

Datetime.date 以年月日的格式获取时间

Datetime.time 以时分秒的格式获取时间

Datetime.timedelta 可以获取时间差

例:
mounth = datetime.datetime.now().date() - datetime.timedelta(weeks=4)

Timedelta的参数:

Days:天

seconds:秒

minutes:分钟

hours:小时

weeks:周

3.统计插件

(1) Highcharts

在产品中心下载,下载的文件中有大量无用的实例,其中的code文件才是核心文件

引用时,引用的是code文件中的highchart.js

图标所放的位置用插件中给出的占位

 <div id="container" style="width:400px;height:400px"></div>

核心代码放在script中

 <script>
     var chart = Highcharts.chart('container', {
         chart: {
             type: 'column'
         },
         title: {
             text: '成单数'
         },
         xAxis: {
             type: 'category',
             labels: {
                 rotation: -45  // 设置轴标签旋转角度
             }
         },
         yAxis: {
             min: 0,
             title: {
                 text: '成单个数'
             }
         },
         legend: {
             enabled: false
         },
         tooltip: {
             pointFormat: '成单数: <b>{point.y} 个</b>'
         },
         series: [{
             name: '总人口',
             data: [[1],[2],[3]],
             dataLabels: {
                 enabled: true,
                 rotation: -90,
                 color: '#FFFFFF',
                 align: 'right',
                 format: '{point.y:.1f}', // :.1f 为保留 1 位小数
                 y: 10
             }
         }]
     });
 </script>

注意:插件对数据的格式要求严格,一定要将数据转换成插件所需要的格式

(2)Echarts

原理同highchart

4.将四个视图函数合成一个视图函数(利用字典做条件区分)

 condition={
     "today":[{"pay_date__gte":now},{"pay_date__lte":now},{"customers__pay_date__gte":now},{"customers__pay_date__lte":now}],
     "yesterday":[{"pay_date__gte":now-yesterday},{"pay_date__lte":now-yesterday},{"customers__pay_date__gte":now-yesterday},{"customers__pay_date__lte":now-yesterday}],
     "week":[{"pay_date__gte":now-week},{"pay_date__lte":now},{"customers__pay_date__gte":now-week},{"customers__pay_date__lte":now}],
     "mounth":[{"pay_date__gte":now-mounth},{"pay_date__lte":now},{"customers__pay_date__gte":now-mounth},{"customers__pay_date__lte":now}],
            }