python-Web-django-图表统计

下载highchart插件包，放在static下

 

<script src="/static/highcharts/highcharts.js"></script>
<script src="/static/highcharts/highcharts-zh_CN.js"></script>

 

 

建路由

# 图表
re_path('click/click/',click.click,name='click/click/')

建方法：

from django.shortcuts import render
from app01.models import *
from back.views.ddff import defense_url

@defense_url
def click(request):
    '''点击量和点赞量图表'''
    recent_seven_day = recent_seven_days()
    list_week_day = recent_seven_day[::-1]

    clicknum_list = []
    praise_num_list = []
    for v in list_week_day:
        res1 = Praise.objects.filter(addtime__icontains = v,praise_type=0).count()
        res2 = Praise.objects.filter(addtime__icontains = v,praise_type=1).count()
        clicknum = res1
        praise_num = res2
        clicknum_list.append(clicknum)
        praise_num_list.append(praise_num)

    return render(request,'click/click.html',locals())


import datetime
def recent_seven_days():
    '''获取7天日期'''
    d = datetime.datetime.now()
    list1 = []
    for i in range(1,8):
        oneday = datetime.timedelta(days=i)
        day = d - oneday
        date_to = datetime.datetime(day.year,day.month,day.day)
        list1.append(str(date_to)[0:10])
    return list1

建html：

 

<script>
        var chart = Highcharts.chart('container', {
    chart: {
        type: 'line'
    },
    title: {
        text: '日点击量和点赞量统计'
    },
    subtitle: {
        text: '数据来源: yunhe.cn'
    },
    xAxis: {
        categories: {{ list_week_day|safe }}
    },
    yAxis: {
        title: {
            text: '点击量 (click)'
        }
    },
    plotOptions: {
        line: {
            dataLabels: {
                // 开启数据标签
                enabled: true
            },
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            enableMouseTracking: false
        }
    },
    series: [{
        name: '点击量',
        data:{{ clicknum_list|safe }}
    }, {
        name: '点赞量',
        data: {{ praise_num_list|safe }}
    }]
});

        </script>

 

 

复制highchart里的html代码和js代码到自己页面中

改js路径

获取近7日日期：

 

转载于:https://www.cnblogs.com/person1-0-1/p/11390831.html