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日日期：