下载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日日期: